Hiding elements based on last closed element jquery script

Posted by Jared on Stack Overflow See other posts from Stack Overflow or by Jared
Published on 2010-04-07T21:59:12Z Indexed on 2010/04/07 22:03 UTC
Read the original article Hit count: 587

Filed under:

Hi my question is, how can I make this jquery script close all previously opened children when entering a new parent? At the moment it traverses thru all the tree structure fine, but switching from one parent to another does not close the previous children, but rather only the each individual parents elements as a user browses.

Here is the jquery I'm using:

<script type="text/javascript">
    $(document).ready($(function(){
      $('#nav>li>ul').hide();
      $('.children').hide();

      $('#nav>li').mousedown(function(){
        // check that the menu is not currently animated
        if ($('#nav ul:animated').size() == 0) {
          // create a reference to the active element (this)
          // so we don't have to keep creating a jQuery object
          $heading = $(this);
          // create a reference to visible sibling elements
          // so we don't have to keep creating a jQuery object
          $expandedSiblings = $heading.siblings().find('ul:visible');
          if ($expandedSiblings.size() > 0) {
            $expandedSiblings.slideUp(0, function(){
                $heading.find('ul').slideDown(0);
            });
          }
          else {
            $heading.find('ul').slideDown(0);
          }
        }
      });

      $('#nav>li>ul>li').mousedown(function(){
        // check that the menu is not currently animated
        if ($('#nav ul:animated').size() == 0) {
          // create a reference to the active element (this)
          // so we don't have to keep creating a jQuery object
          $heading2 = $(this);
          // create a reference to visible sibling elements
          // so we don't have to keep creating a jQuery object
          $expandedSiblings2 = $heading2.siblings().find('.children:visible');
          if ($expandedSiblings2.size() > 0) {
            $expandedSiblings2.slideUp(0, function(){
                $heading2.find('.children').slideDown(0);
            });
          } else {
            $heading2.find('.children').slideDown(0);
          }
        }    

       });

    }));

    </script>

and here is my html output

<ul id="nav"> 

<li><a href="#">folder 4</a>

<ul><li><a href="#">2001</a>

<ul><li class="children"><a href="./directory//folder 4/2001/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2001/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder 4/2001/doc3.txt">doc3.txt</a></li>

</ul>

</li>

<li><a href="#">2002</a>

<ul><li class="children"><a href="./directory//folder 4/2002/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2002/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder 4/2002/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder 4/2002/doc4.txt">doc4.txt</a></li>

</ul>

</li>

<li><a href="#">2003</a>

<ul><li class="children"><a href="./directory//folder 4/2003/Copy of doc1.txt">Copy of doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2003/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2003/doc2.txt">doc2.txt</a></li>

</ul>

</li>

<li><a href="#">2004</a>

<ul><li class="children"><a href="./directory//folder 4/2004/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2004/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder 4/2004/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder 4/2004/doc4.txt">doc4.txt</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">folder1</a>

<ul><li><a href="#">2001</a>

<ul><li class="children"><a href="./directory//folder1/2001/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2001/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder1/2001/doc3.txt">doc3.txt</a></li>

</ul>

</li>

<li><a href="#">2002</a>

<ul><li class="children"><a href="./directory//folder1/2002/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2002/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder1/2002/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder1/2002/doc4.txt">doc4.txt</a></li>

</ul>

</li>

<li><a href="#">2003</a>

<ul><li class="children"><a href="./directory//folder1/2003/Copy of doc1.txt">Copy of doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2003/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2003/doc2.txt">doc2.txt</a></li>

</ul>

</li>

<li><a href="#">2004</a>

<ul><li class="children"><a href="./directory//folder1/2004/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2004/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder1/2004/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder1/2004/doc4.txt">doc4.txt</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">folder2</a>

<ul><li><a href="#">2001</a>

<ul><li class="children"><a href="./directory//folder2/2001/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2001/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder2/2001/doc3.txt">doc3.txt</a></li>

</ul>

</li>

<li><a href="#">2002</a>

<ul><li class="children"><a href="./directory//folder2/2002/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2002/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder2/2002/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder2/2002/doc4.txt">doc4.txt</a></li>

</ul>

</li>

<li><a href="#">2003</a>

<ul><li class="children"><a href="./directory//folder2/2003/Copy of doc1.txt">Copy of doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2003/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2003/doc2.txt">doc2.txt</a></li>

</ul>

</li>

<li><a href="#">2004</a>

<ul><li class="children"><a href="./directory//folder2/2004/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2004/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder2/2004/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder2/2004/doc4.txt">doc4.txt</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">folder3</a>

<ul><li><a href="#">2001</a>

<ul><li class="children"><a href="./directory//folder3/2001/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2001/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder3/2001/doc3.txt">doc3.txt</a></li>

</ul>

</li>

<li><a href="#">2002</a>

<ul><li class="children"><a href="./directory//folder3/2002/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2002/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder3/2002/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder3/2002/doc4.txt">doc4.txt</a></li>

</ul>

</li>

<li><a href="#">2003</a>

<ul><li class="children"><a href="./directory//folder3/2003/Copy of doc1.txt">Copy of doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2003/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2003/doc2.txt">doc2.txt</a></li>

</ul>

</li>

<li><a href="#">2004</a>

<ul><li class="children"><a href="./directory//folder3/2004/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2004/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder3/2004/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder3/2004/doc4.txt">doc4.txt</a></li>

</ul>

</li>

</ul>

</li>

</ul>

I assume my problem is, jquery isn't closing the children between each new parent so I need to make a call, but I'm a bit lost on how to do that.

I know the code is pretty messy, this project was done in a huge rush and a very tight timeframe.

Appreciate your answers and any other constructive comments, cheers :)

© Stack Overflow or respective owner

Related posts about jQuery