Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

- - - - -

Preventing onclick() inheritance


  • Please log in to reply
No replies to this topic

#1 RHochstenbach


    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 56 posts

Posted 02 June 2011 - 02:34 AM

I am building my own drop-down directory tree, and using a JavaScript onclick() event to show and hide child elements. The construction is basically an Unordered List.

<li><a href='#' onclick="toggle_visibility('level2');"> Parent 1 </li>
<ul id='level2 style="display: none;">
<li>Child 1</li>
<li>Child 2</li>

Using in-line CSS to hide the child elements by default.
Using this JavaScript code:
<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
          e.style.display = 'none';


When I click on the parent element, the child elements show up properly as they should. But when I click on a child element, the entire tree collapses again (I think it's using some kind of inheritance). How can I prevent this from happening?

I've already tried giving the child elements a unique ID, but that doesn't seem to work.

This might not be important, but it's still worth mentioning that each child element is a hyperlink that submits a form using javascript in my actual code.

edit: never mind, I fixed it. Apparently the page gets reloaded whenever a form is submitted. To fix it, you must use IF statements to check if the form already has been submitted (passing information through hidden form elements, and then set the style of the child elements to "display: block" whenever the contents of the form have been submitted. In my case I've been using this with PHP variables :)
  • 0

Also tagged with one or more of these keywords: inheritance

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download