Why is this jQuery slideToggle code not working?

Question

I am trying to change the button text for the expand / collapse button. Basically, the user clicks "Minimize" and I execute the slideToggle function, and when the slideToggle method is executed, I change the button text to "Expand" and vice versa.

The following code works fine if you quickly click on the expand / collapse button, it loses its mind and shows “Expand” when it is already deployed, or “Collapse” when it has already collapsed.

Any advice is appreciated.

Thanks!

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

Answer 1

In your case, it would be safer to check when you set the text, after the animation finishes, for example:

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

You are currently checking when it starts, but don’t remember that it is not :hidden until it finishes hiding, so until the end of slideUp it is still :visible :)

Answer 2

You can also try using

 :not(:animated)