hoverintent for onclick

Question

I am using jqueryUI to do a toggle effect a div box

example: http://jqueryui.com/toggle/

The only problem is when i clicked the button for multiple times at a rapid speed and stop clicking it, the div box don't stop the toggle effect immediately but continue to perform at the same amount of my previous clicks.

The problem is similar to hover toggle/animation effect case, and hoverintent will be the solution for hover bug.

I am not able to found any hoverintent for onclick toggle effect. any suggestion?

thanks in advanced!

Answer 1

With code below you can click all you want...(I didn't used Jquery UI for this but good ol Jquery library, but it should work with UI...)
Try this:
Fiddle here

$(document).ready(function(){
$('.button').click(function(){
if($('.toggle').is(':visible')){
$('.toggle').slideUp(500);
}
else{
$('.toggle').slideDown(500);
}
});
});

Answer 2

It's becouse effects are queued. To turn it off just use option:

{queue: false}