Accordions

Default Accordion

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-bs-toggle="collapse" is required.

Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.

Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.

Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.
<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">Panel One <i class="fas fa-chevron-down"></i></button>
        </h2><!-- / accordion-header -->
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                 ...
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->

    <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">Panel Two <i class="fas fa-chevron-down"></i></button>
        </h2><!-- / accordion-header -->
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                 ...
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->

    <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">Panel Three <i class="fas fa-chevron-down"></i></button>
        </h2><!-- / accordion-header -->
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                 ...
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->
</div><!-- / accordion -->

Minimal Accordion

We've created a secondary style of accordion, which can be done by adding .minimal-accordion along with .accordion as a wrapper.

Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.

Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.

Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.
<div class="accordion minimal-accordion" id="minimal-accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="minimal-headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#minimal-collapseOne" aria-expanded="true" aria-controls="minimal-collapseOne">Panel One <span><i class="fas fa-chevron-down"></i></span></button>
        </h2><!-- / accordion-header -->
        <div id="minimal-collapseOne" class="accordion-collapse collapse show" aria-labelledby="minimal-headingOne" data-bs-parent="#minimal-accordionExample">
            <div class="accordion-body">
                 ...
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->

    <div class="accordion-item">
        <h2 class="accordion-header" id="minimal-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#minimal-collapseTwo" aria-expanded="false" aria-controls="minimal-collapseTwo">Panel Two <span><i class="fas fa-chevron-down"></i></span></button>
        </h2><!-- / accordion-header -->
        <div id="minimal-collapseTwo" class="accordion-collapse collapse" aria-labelledby="minimal-headingTwo" data-bs-parent="#minimal-accordionExample">
            <div class="accordion-body">
                 ...
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->

    <div class="accordion-item">
        <h2 class="accordion-header" id="minimal-headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#minimal-collapseThree" aria-expanded="false" aria-controls="minimal-collapseThree">Panel Three <span><i class="fas fa-chevron-down"></i></span></button>
        </h2><!-- / accordion-header -->
        <div id="minimal-collapseThree" class="accordion-collapse collapse" aria-labelledby="minimal-headingThree" data-bs-parent="#minimal-accordionExample">
            <div class="accordion-body">
                 ...
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->
</div><!-- / minimal-accordion -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav