Why does this jquery slideToggle code not work?

Question

I am trying to alter the button text for a expand/collapse button. Basically, a user clicks "Collapse" and I perform a slideToggle and when the slideToggle is done, I change the button text to "Expand" and vice-versa.

The following code works great however if you click the expand/collapse button rapidly, it looses its mind and shows "Expand" when it's already expanded or "Collapse" when it's already collapsed.

Any tips are appreciated.

Thanks!

function toggleBox( button, box ){ if($(box).is(":hidden")) { $(box).slideToggle("slow", function(){ $(button).html("Collapse"); }); } else { $(box).slideToggle("slow", function(){ $(button).html("Expand"); }); } }

Answer 1

chaining

.stop(true, true) 

before slideToggle() should help.

Answer 2

You can also try using

:not(:animated)

Answer 3

In your case, it'd be safer to do the check as you're setting the text, after the animation finishes, like this:

function toggleBox( button, box ){ 
  $(box).slideToggle("slow", function(){ 
    $(button).html($(this).is(":hidden") ? "Expand" : "Collapse"); 
  }); 
}

Currently you're checking when it starts, but remember it's not :hidden until it finishes hiding, so until the moment the slideUp completes, it's still :visible :)