Accordions

The accordion uses collapse internally to make it collapsible.

Click the accordions below to expand/collapse the accordion content.To render an accordion that’s expanded by default:

• add the .show class on the .accordion-collapse element.

• drop the .collapsed class from the .accordion-button element and set its aria-expanded attribute to true.

• Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.

• Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.

<!-- accordion -->
<div class="accordion">
    <!-- accordion 1 -->
    <div class="accordion-item">
        <!-- accordion header -->
        <div class="accordion-header py-1 px-1">
            <button class="accordion-button collapsed d-flex align-items-center gap-2 fs-5 fw-bold mb-0" type="button" aria-expanded="false">
                ...
            </button>
        </div>

        <!-- accordion body -->
        <div class="accordion-collapse collapse show">
            <div class="accordion-body">
                ...
            </div>
        </div>
    </div>

    <!-- accordion 2 -->
    <div class="accordion-item">
        <!-- accordion header -->
        <div class="accordion-header py-1 px-1">
            <button class="accordion-button collapsed d-flex align-items-center gap-2 fs-5 fw-bold mb-0" type="button" aria-expanded="false">
                ...
            </button>
        </div>

        <!-- accordion body -->
        <div class="accordion-collapse collapse">
            <div class="accordion-body">
                ...
            </div>
        </div>
    </div>
</div>