Question

I have a simple accordion menu I’ve put together today using the jQuery slideDown() and slideUp() methods.
Example code:

<h1>the header</h1>
<div class='thechild'>
the content
</div>

$(function(){

    $('h1').click(function(){
        var next = $(this).next();
        if (next.is(':visible'))
        {
            next.stop().slideUp();
        }
        else
        {
            next.stop().slideDown();
        }             
        return false;
    });

});

This works great, however if you click on one of the <h1>‘s once then again before the animation completes, you can break the slideUp() or slideDown() event.
What appears to happen is that the second time you click, it will slideUp() to zero height fine but if you are sliding down, it will only slide down to its last previous maximum height – i.e the height .thechild was at the last time you interrupted the animation by clicking.

What I need is for one click to slideUp or slideDown .thechild as appropriate, and a second click to stop the animation (if running) and slide .thechild up. A subsequent third click should slideDown .thechild to it’s full height, not the height it was at when interrupted at click #2. Hope that all makes sense 🙂

I’m sure I once had this problem before and solved it somehow, but can’t remember (or google) the solution I came up with. Is this just a limitation of those slide methods, and is the workaround to do my own animate() calls with some more working out for heights?

I’ve tried playing around with the various booleans you can pass into .stop(), but to no avail. There must be something simple I’m missing, can anyone enlighten me?

jsfiddle here: http://jsfiddle.net/cY6kX/

to recreate, double-click on the <h1> a bunch of times and watch what happens, then click a few more times to see how it will break like this until you reload the page.

Any pointers greatly appreciated

Answer 1

Add true, true to the stops to complete the animation in full:

$(function(){

    $('h1').click(function(){
        var next = $(this).next();
        if (next.is(':visible'))
        {
            next.stop(true, true).slideUp();
        }
        else
        {
            next.stop(true, true).slideDown();
        }             
        return false;
    });

});

Fiddle: http://jsfiddle.net/maniator/cY6kX/2/