JQuery slideToggle() clicked multiple times - prevent animation

Question

I've searched around for a solution for a while, but can't seem to find it. I thought maybe using JQuery's .clearQueue() as in my fiddle, but it doe'snt work.

Here's the fiddle.

To be clear: I want the sideToggle() to execute, but as soon as it gets clicked again & the first slideToggle() hasn't finished yet, it should stop the animation of the first and slide back up. Using the .clearQueue() method it does work for two clicks, but when clicked eg three times, the box dissapears and the heigt is somehow messed up.

Answer 1

Using stop() during the animation can lead to bad situations where the original height cannot be reached anymore.

Another option is to force the animation to finish before the click can fire it again:

function clickFunc() {
    var $this=$(this);
    if($this.hasClass('toggling')){return;}
    $this.addClass('toggling')
    $this.stop().slideToggle(300,function(){
        $this.removeClass('toggling');
    });
}

Answer 2

Using the jquery .stop() api does the trick.

Working example.