I'm just starting up with jQuery, and have run into a problem with my
navigation menu.
It's a vertical accordion menu, with each section opening when
clicked, and any other open sections close. Also, a section will
close if it's open and clicked.
So, I have the following code attached to the <a> elements in the menu:
$('.topMenu').click(function(){
$(this).next().addClass('active');
$('ul.level1').filter(':visible').not('.active').slideUp('normal');
$('.active').slideToggle('normal');
$(this).next().removeClass('active');
return false;
});
The HTML looks like this:
<ul>
<li><a href="link.htm" class="topMenu">Section 1</a>
<ul class="level1">
<li><a href="link.htm">Link 1</a></li>
<li><a href="link.htm">Link 2</a></li>
</ul>
</li>
<li><a href="link.htm" class="topMenu">Section 2</a>
<ul class="level1">
<li><a href="link.htm">Link 1</a></li>
<li><a href="link.htm">Link 2</a></li>
</ul>
</li>
<li><a href="link.htm" class="topMenu">Section 3</a>
<ul class="level1">
<li><a href="link.htm">Link 1</a></li>
<li><a href="link.htm">Link 2</a></li>
</ul>
</li>
</ul>
This flags the clicked link; closes all the sections at the same
level that are not the flagged link; toggles the clicked link; then
removes the flag; and finally returns false so the browser doesn't
follow the link.
My problem is that, as the code stands, the closing and opening take
place at the same time; I want the open sections to close, and then
when that's finished the clicked section should toggle.
I initially thought the callback feature would handle this; but after
trying to work out why it didn't work, found that the rest of the
script continues.
I also thought chaining might be the answer, but couldn't get it to
work as I wanted...
How can I get the slideToggle to wait for the slideUp to complete?
Seb
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
