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

Asked on Jun 21, 2025

1 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.

← Back to All Questions