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 :)
