Collapse Parent Grouping does not work inside a parent container with a "collapse" class

[BenjaminWKI]

Using Bootstrap 5.1 with my demonstration code below, the grouped "Child 1" and "Child 2" accordions refuse to hide the other when one is being opened.
The moment you remove the "collapse" class from the "parentContent" div container, the grouping works.

https://codepen.io/BenjaminWKI/pen/rNwxbBO

[GeoSot]

@BenjaminWKI please move this code into a code pen example and attach the link here

[GeoSot]

Thank you for transferring it.
I took up a look and seems that if you remove the second line <div class="accordion-item"> (and the closing tag) it works fine

Try the snippet below

<div id="parentGroup" class="accordion">

        <div id="parentHeader" class="accordion-header">
            <a href="#parentContent" data-bs-toggle="collapse" role="button" class="accordion-toggle">Parent</a>
        </div>
        <div id="parentContent" class="accordion-collapse collapse" aria-labelledby="parentHeader" data-bs-parent="#parentGroup">
            <div class="accordion-body">
                <div id="childGroup" class="accordion">
                    <div class="accordion-item">
                        <div id="childHeader1" class="accordion-header">
                            <a href="#childContent1" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 1</a>
                        </div>
                        <div id="childContent1" class="accordion-collapse collapse" aria-labelledby="childHeader1" data-bs-parent="#childGroup">
                            <div class="card-body">
                                <ul class="list-group">
                                    <li class="list-group-item"><a id="#indexLink_slideID1" href="javascript:showSlide();">Slide 1</a></li>
                                    <li class="list-group-item"><a id="#indexLink_slideID2" href="javascript:showSlide();">Slide 2</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <div id="childHeader2" class="accordion-header">
                            <a href="#childContent2" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 2</a>
                        </div>
                        <div id="childContent2" class="accordion-collapse collapse" aria-labelledby="childHeader2" data-bs-parent="#childGroup">
                            <div class="card-body">
                                <ul class="list-group">
                                    <li class="list-group-item"><a id="#indexLink_slideID3" href="javascript:showSlide();">Slide 3</a></li>
                                    <li class="list-group-item"><a id="#indexLink_slideID4" href="javascript:showSlide();">Slide 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</div>

[BenjaminWKI]

Hi GeoSot,
I've tried your snippet code and there is no change in its behaviour. Both Child 1 & Child 2 would stay open.
If anything, removing the first <div class="accordion-item"> broke the grouping even further.
Without that div, ... my earlier fix: to remove the "collapse" class from <div id="parentContent">, ... would result in the same broken behaviour.

[Rezyan]

Thank you for transferring it.
I took up a look and seems that if you remove the second line <div class="accordion-item"> (and the closing tag) it works fine

Try the snippet below

<div id="parentGroup" class="accordion">

        <div id="parentHeader" class="accordion-header">
            <a href="#parentContent" data-bs-toggle="collapse" role="button" class="accordion-toggle">Parent</a>
        </div>
        <div id="parentContent" class="accordion-collapse collapse" aria-labelledby="parentHeader" data-bs-parent="#parentGroup">
            <div class="accordion-body">
                <div id="childGroup" class="accordion">
                    <div class="accordion-item">
                        <div id="childHeader1" class="accordion-header">
                            <a href="#childContent1" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 1</a>
                        </div>
                        <div id="childContent1" class="accordion-collapse collapse" aria-labelledby="childHeader1" data-bs-parent="#childGroup">
                            <div class="card-body">
                                <ul class="list-group">
                                    <li class="list-group-item"><a id="#indexLink_slideID1" href="javascript:showSlide();">Slide 1</a></li>
                                    <li class="list-group-item"><a id="#indexLink_slideID2" href="javascript:showSlide();">Slide 2</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <div id="childHeader2" class="accordion-header">
                            <a href="#childContent2" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 2</a>
                        </div>
                        <div id="childContent2" class="accordion-collapse collapse" aria-labelledby="childHeader2" data-bs-parent="#childGroup">
                            <div class="card-body">
                                <ul class="list-group">
                                    <li class="list-group-item"><a id="#indexLink_slideID3" href="javascript:showSlide();">Slide 3</a></li>
                                    <li class="list-group-item"><a id="#indexLink_slideID4" href="javascript:showSlide();">Slide 4</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</div>

Hi @GeoSot ,

I agree with @BenjaminWKI, there is a bug. The behavior of nested collapsibles with parents presents some bug since the v5 of Bootstrap.

I have created 2 Code Pen with your snippet to show you the problem:

• The first one with Bootstrap v4.6 where everything is ok.
• The second one with Bootstrap v5.1 where the bug is present.

[bewards]

I was having a similar issue where I had an accordion inside a mobile collapsible hamburger menu. Every time I clicked on an accordion item, the dropdown menu would close. I was able to fix this on v5.0.1 by adding the show/hide event listeners to the accordion that took the event and stopped the propagation up to the dropdown menu. In v5.1.0+ this code no longer prevents the parent dropdown menu from triggering the "show/shown" events, and I'm seeing the problems stated above as well.

From the screenshot below, we can see that the Collapse JS code does not detect any "active" collapse items after the "Residential" button arrow is clicked, even though we can see that the first accordion item is active. I have this accordion set up within a "navbar.collapse" for mobile (opened via the hamburger button).

I'm not sure if this is an issue, but the ".collapse .collapse" selector returns the same elements as just ".collapse", as if it's not respecting the start location (accordion) and instead using the root document:

[bewards]

@GeoSot I believe line 275 in collapse.js is missing the :scope pseudo-class at the start of ".collapse .collapse", as we want to be in the context of the parent accordion.

https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

[GeoSot]

@bewards Many Many thanks. You saved me some time of searching

[bewards]

@GeoSot what's the timeline around release v5.1.2? I couldn't find release timeframes anywhere and didn't know if it followed the typical 2 week sprints.

[GeoSot]

It would be a nice idea to follow the " typical 2 weeks sprints", however I do not have this knowledge too
CC @mdo for a better answer than mine 😃