How do I nest collapses (accordion inside accordion) without conflicts?

Asked on Jun 20, 2025

Answer

To nest collapses in Bootstrap 5, you can place an accordion inside another accordion's collapse item. Ensure each accordion has unique IDs to prevent conflicts.

<!-- BEGIN COPY / PASTE -->
        <div class="accordion" id="outerAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Outer Accordion Item #1
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#outerAccordion">
                    <div class="accordion-body">
                        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. 
                        <div class="accordion mt-3" id="innerAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="innerHeadingOne">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#innerCollapseOne" aria-expanded="false" aria-controls="innerCollapseOne">
                                        Inner Accordion Item #1
                                    </button>
                                </h2>
                                <div id="innerCollapseOne" class="accordion-collapse collapse" aria-labelledby="innerHeadingOne" data-bs-parent="#innerAccordion">
                                    <div class="accordion-body">
                                        This is the inner accordion's first item body.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Ensure each accordion has a unique `id` attribute for the accordion container and each collapse item.
Use `data-bs-parent` to manage the collapse behavior within each accordion.
The outer accordion's collapse item contains the nested accordion.
You can add more items to both the outer and inner accordions by following the same structure.
Bootstrap's JavaScript is required for the collapse functionality to work.

✅ Answered with Bootstrap 5 best practices.