Multiple sections can be expanded with Bootstrap 5.1 accordion

[ShaCP]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I noticed it works differently compared to 5.0. If you quickly press two buttons it will open both sections at the same time. 5.0 correctly blocks the second button. You can check this on the official docs demos.

Reduced test cases

Official doc demos:
https://getbootstrap.com/docs/5.1/components/accordion/#example
https://getbootstrap.com/docs/5.0/components/accordion/#example

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.1

[WinterSilence]

problem in Collapse._isTransitioning. By default, _isTransitioning is false and user can toggle second item before first transition is completed

[GeoSot]

Nice catch guys.

The problem seems to be there:
const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'
We search for these selectors, but seems that some css magic has to be done during close & show, and .collapse class is tweaked too.

@WinterSilence as I can understand you want to experiment over these, so you can try remove the

 this._element.classList.add(CLASS_NAME_COLLAPSE)

//and

 this._element.classList.remove(CLASS_NAME_COLLAPSE)

from code, and check the results 😉

ps: maybe a revisit to this scss/transitions.scss:10

[WinterSilence]

@GeoSot this flag activates not at begin of show/hide methods

[GeoSot]

yes, indeed. I did my checks based on your comments

However is activated on proper timing, after the required checks, and before starting the transitioning process 😃

[WinterSilence]

@GeoSot

The problem seems to be there:
const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'

revert to const SELECTOR_ACTIVES = '.show, .collapsing'don't fixes bug too :(

[WinterSilence]

@GeoSot this problem detected in 5.0 too :(

[GeoSot]

const SELECTOR_ACTIVES = '.collapse.show, .collapsing'
plus something more

check this b820965

[genesi5]

I'm currently dealing with the same issue on Bootstrap 5.2, when switching between two or more Collapses. If i quickly toggle another button tab(s) before first collapse body is still in transition - both or more collapse bodies (if you're an osu! player =) showing up. Also - it ruins button states, when it is shown as active, but its body collapsed.

2022-06-19_04-12-18.mp4