How to execute the next click only when previous click finish?

Question

My HTML:

<div>
    <p>Testing Paragraph</p>
    <span>Testing Span</span>
    <div class="content">This is the main content of this div</div>
</div>

My jQuery:

$('p').click(function () {
    $(this).parent().find('.content').slideToggle('slow');
});

Fiddle: http://jsfiddle.net/Vs5DX/

As you can see from the demo, the content will slide up and slide down when you click the paragraph. The problem is that if I click the paragraph for many times very fast then it's continuously going up and down without clicking.

I've tried:

$(this).parent().find('.content').stop(true).slideToggle('slow'); 

But it's even worse when the animation stop going. Any ideas?

Answer 1

You can use :not to exclude the current :animated elements:

$('p').click(function () {
    $(this).parent().find('.content:not(:animated)').slideToggle('slow');
}); 

Updated Fiddle

Answer 2

Start with a variable:

varClicked = false;

on slideDown make it as true, allow slideUp only if it is true, on SlideUp, make it false again