Two collapsible elements with the same parent can be opened at the same time.

[imabot2]

Prerequisites

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

Describe the issue

Consider using multiple collapse element with the parent option :

const bsCollapse1 = new bootstrap.Collapse('#collapse1', {
  toggle: false, 
  parent: parent
})
const bsCollapse2 = new bootstrap.Collapse('#collapse2', {
  toggle: false, 
  parent: parent
})

When the second collapsible element is opened while the first one is still transitioning, the two collapsible elements can be opened at the same time.

Reduced test cases

The following CodePen shows the problem

https://codepen.io/Fifi-Lulu/pen/xxMdqre

The two collapsible elements should never be opened at the same time.

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

Linux

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

Chrome

What version of Bootstrap are you using?

5.3.2

[julien-deramond]

Thanks for reporting this issue @imabot2 I've just checked your CodePen example. Is what you're trying to achieve is something like the following?

const parent = document.getElementById('parent')
const bsCollapse1 = new bootstrap.Collapse('#collapse1', {
  toggle: false, 
  parent: parent
})
const bsCollapse2 = new bootstrap.Collapse('#collapse2', {
  toggle: false, 
  parent: parent
})

bsCollapse1.show();

document.getElementById('collapse1').addEventListener('shown.bs.collapse', event => {
  bsCollapse2.show();
});

Because in the doc we mention the following, but I'm not sure if it's related to your use case exactly:

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started, but before it ends.

and

show: Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (e.g., before the shown.bs.collapse event occurs).

[imabot2]

@julien-deramond No, this is not what I want to achieve. I reported a general issue which, I think, is clear :

When the second collapsible element is opened while the first one is still transitioning, the two collapsible elements can be opened at the same time. The two collapsible elements should never be opened at the same time.

The problem comes from the fact the collapse/expand are triggerd by user event. I'm building a menu where each section is a collapsible element. The burger menu on this page: https://thememoriser.com. On the following video, in the first sequence, the user click slowly. Everything is fine. In the second part, the user clicks a second time, while the previous element is still transitioning. As you can see, two menus are open at the same time, and it shouldn't happen.

Screencast from 11-11-2023 16:58:26.webm

[MerlinChatou]

I've got exactly the same problem.