Hiding elements based on last closed element jquery script
- by Jared
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 :)
