How can I have an accordion that allows multiple items open at once?

Asked on Jun 21, 2025

Answer

In Bootstrap 5, you can create an accordion that allows multiple items to be open simultaneously by not using the `data-bs-parent` attribute. Here's a simple example to achieve this.

<!-- BEGIN COPY / PASTE -->
        <div class="accordion" id="accordionExample">
            <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">
                        Accordion Item #1
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        This is the first item's accordion body.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Accordion Item #2
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
                    <div class="accordion-body">
                        This is the second item's accordion body.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Accordion Item #3
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
                    <div class="accordion-body">
                        This is the third item's accordion body.
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `data-bs-parent` attribute is omitted to allow multiple accordion items to be open at the same time.
Each accordion item has its own `id` for the collapse element, ensuring they function independently.
The `aria-expanded` attribute should be set to `true` for the initially open item and `false` for collapsed items.

✅ Answered with Bootstrap 5 best practices.