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: 647
jQuery
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