HTML CSS Bootstrap JavaScript jQuery MySQL PHP Data Mining

Bootstrap Accordion

An Accordion is a vertically collapsing component that fundamentally acts as a list of headers hiding detailed body paragraphs beneath them. They are heavily utilized for Frequently Asked Questions (FAQ) components, dense tables of contents, or compacting overly complex user dashboards.

Basic Accordion

To construct a reliable accordion, you begin with the main .accordion wrapper. Inside, you stack multiple .accordion-item elements. Each item possesses an .accordion-header (equipped with an .accordion-button to toggle visibility) and an .accordion-collapse wrapper holding the standard .accordion-body.

When the data-bs-parent attribute is mapped on the collapsing containers back to the main accordion ID, Bootstrap enforces exclusive state—opening one item automatically collapses all others.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default. If you click on the heading, I will gracefully animate open. But because `data-bs-parent` is set, opening me will forcibly collapse the first item above me simultaneously!

This is the third item's accordion body. Nothing special here, just another panel demonstrating the smooth slide effect. 
<!-- Notice data-bs-parent ensures exclusive toggling -->
<div class="accordion" id="accordionExample">
    <!-- Item 1 -->
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">...</div>
        </div>
    </div>
    
    <!-- Item 2 -->
    <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">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">...</div>
        </div>
    </div>
</div>

Flush Accordion

To render accordions completely edge-to-edge relative to their parent container, append the .accordion-flush class snippet onto the primary `.accordion` wrapper. This explicitly strips out default background colors, outer borders, and some rounded corners.

See how the outer border is completely missing? It makes the accordion fit flatly against its parent box perfectly.

More flush content seamlessly appearing here.
<!-- Include .accordion-flush -->
<div class="accordion accordion-flush" id="accordionFlushExample">
    ...
</div>

Always Open (Non-Exclusive)

Sometimes you want users to open numerous accordion items simultaneously without one forcefully collapsing the other. To achieve this, simply omit the data-bs-parent attribute on each respective .accordion-collapse element.

This panel acts totally independent. If I am open, and you proceed to open Item #2 below, I will absolutely stay open until you click my header button explicitly again!

I am also completely independent. It feels like the components are simply separate collapsible windows entirely. 
<!-- Notice data-bs-parent is missing entirely from the collapse element! -->
<div class="accordion-item">
    <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFree">
            Independent Item
        </button>
    </h2>
    <!-- Removed data-bs-parent -->
    <div id="collapseFree" class="accordion-collapse collapse">
        <div class="accordion-body">...</div>
    </div>
</div>
« Previous Lesson Next Lesson »