The animation functions accept a callback function as a parameter that
gets called when the animation has finished. You probably want
something like this:
$('.topMenu').click(function(){
var next = $(this).next();
next.addClass('active');
$('ul.level1').filter(':visible').not('.active').slideUp('normal',
function() {
$('.active').slideToggle('normal', function() {
next.removeClass('active');
});
});
return false;
});
But like Rey said, you may want to consider looking into existing
accordion plugins. Here's another:
http://interface.eyecon.ro/demos/accordion.html
--Erik
On 2/6/07, Seb Duggan <[EMAIL PROTECTED]> wrote:
> 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/
>
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
