Collapse show/hide/toggle methods don't work while a previous animation is still running

[MiladSadinam]

Using

$('.collapse').collapse('show');
$('.collapse').collapse('hide');

ends up in state 'show'. The second collapse() is being ignored because the first animation is still running.

https://jsfiddle.net/fjb5r9s5/2/ demonstrates that clicking quickly the button results in wrong states.

I could reproduce this in the current versions of Chrome, Firefox and IE.

EDIT: Fixed HTML5 Validator error

[twbs-lmvtfy]

Hi @MiladSadinam!

You appear to have posted a live example (https://fiddle.jshell.net/fjb5r9s5/1/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 49, column 57 thru line 49, column 64: Stray end tag input.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[cvrebert]

Yes, these methods are async. You need to use the events they fire to wait for completion.
This should be documented better, like we do for the analogous tooltip/popover methods.

[MiladSadinam]

I see what you mean. In case of my jsfiddle example I see two solutions:

• On button click I disable the button for the time until "shown.bs.collapse"/"hidden.bs.collapse" is triggered
• I manually recall collapse() on "shown.bs.collapse"/"hidden.bs.collapse" when the current collapse state is "wrong".

Both solutions are not optimal. Perhaps there is a better solution? Like any collapse() call overrides previous animations?

[cvrebert]

Or I suppose we could add some logic similar to

bootstrap/js/carousel.js

Line 88 in 9227631

if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"

to postpone the reaction to a click when (un)collapsing is already in progress.

[MiladSadinam]

Yeah, this makes the method definitely more intuitive. Thanks for the quick responses.

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team