Bootstrap 5 Framework

Accordions

13 min Lesson 30 of 40

Accordions in Bootstrap 5

Accordions allow you to organize content into collapsible sections. They are perfect for FAQs, documentation, and any content that benefits from progressive disclosure.

Basic Accordion Structure

Create a basic accordion with multiple collapsible items:

<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">
                <strong>This is the first item's accordion body.</strong> It is shown by default with the <code>.show</code> class, until the collapse plugin adds the appropriate classes.
            </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" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes.
            </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" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes.
            </div>
        </div>
    </div>
</div>
    

Accordion Components:

.accordion - Container wrapper
.accordion-item - Individual accordion section
.accordion-header - Header with toggle button
.accordion-button - Clickable toggle button
.accordion-collapse - Collapsible content wrapper
.accordion-body - Actual content area

Important: The data-bs-parent attribute ensures that when one accordion item opens, the others close automatically. This creates the classic accordion behavior.

Always-Open Accordion

Remove the data-bs-parent attribute to allow multiple items to stay open:

<div class="accordion" id="accordionPanelsStayOpenExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
            <div class="accordion-body">
                This item stays open when others are opened.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
            <div class="accordion-body">
                This item can be open at the same time as others.
            </div>
        </div>
    </div>
</div>
    

Flush Accordion

Remove borders and rounded corners for a flush accordion style:

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                Flush Accordion Item #1
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                This accordion has no borders or background colors.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                Flush Accordion Item #2
            </button>
        </h2>
        <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                Perfect for placing inside cards or containers.
            </div>
        </div>
    </div>
</div>
    

Use Case: Flush accordions work great when you want to integrate accordion functionality into existing designs without the visual weight of borders and backgrounds.

Accordion with Custom Content

Add rich content including images, lists, and buttons inside accordion bodies:

<div class="accordion" id="accordionCustomContent">
    <div class="accordion-item">
        <h2 class="accordion-header" id="customHeadingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#customCollapseOne" aria-expanded="true" aria-controls="customCollapseOne">
                Rich Content Example
            </button>
        </h2>
        <div id="customCollapseOne" class="accordion-collapse collapse show" aria-labelledby="customHeadingOne" data-bs-parent="#accordionCustomContent">
            <div class="accordion-body">
                <h5>Features:</h5>
                <ul>
                    <li>Feature one with detailed description</li>
                    <li>Feature two with more information</li>
                    <li>Feature three with examples</li>
                </ul>
                <img src="image.jpg" class="img-fluid mb-3" alt="Example">
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="customHeadingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#customCollapseTwo" aria-expanded="false" aria-controls="customCollapseTwo">
                Table Example
            </button>
        </h2>
        <div id="customCollapseTwo" class="accordion-collapse collapse" aria-labelledby="customHeadingTwo" data-bs-parent="#accordionCustomContent">
            <div class="accordion-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Item 1</td>
                            <td>Value 1</td>
                        </tr>
                        <tr>
                            <td>Item 2</td>
                            <td>Value 2</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
    

Accordion JavaScript API

Control accordions programmatically using JavaScript:

<!-- HTML Structure -->
<button class="btn btn-primary mb-3" id="toggleAccordion">Toggle First Item</button>
<button class="btn btn-secondary mb-3" id="showAllAccordion">Show All</button>
<button class="btn btn-danger mb-3" id="hideAllAccordion">Hide All</button>

<div class="accordion" id="accordionJS">
    <div class="accordion-item">
        <h2 class="accordion-header" id="jsHeadingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#jsCollapseOne" aria-expanded="false" aria-controls="jsCollapseOne">
                Controlled Item #1
            </button>
        </h2>
        <div id="jsCollapseOne" class="accordion-collapse collapse" aria-labelledby="jsHeadingOne">
            <div class="accordion-body">
                Content controlled by JavaScript.
            </div>
        </div>
    </div>
</div>

<script>
// Initialize accordion
var collapseOne = document.getElementById('jsCollapseOne');
var bsCollapse = new bootstrap.Collapse(collapseOne, {
    toggle: false
});

// Toggle single item
document.getElementById('toggleAccordion').addEventListener('click', function() {
    bsCollapse.toggle();
});

// Show item
document.getElementById('showAllAccordion').addEventListener('click', function() {
    bsCollapse.show();
});

// Hide item
document.getElementById('hideAllAccordion').addEventListener('click', function() {
    bsCollapse.hide();
});

// Listen to events
collapseOne.addEventListener('show.bs.collapse', function() {
    console.log('Accordion is opening');
});

collapseOne.addEventListener('shown.bs.collapse', function() {
    console.log('Accordion is fully open');
});

collapseOne.addEventListener('hide.bs.collapse', function() {
    console.log('Accordion is closing');
});

collapseOne.addEventListener('hidden.bs.collapse', function() {
    console.log('Accordion is fully closed');
});
</script>
    

Accordion Events:

show.bs.collapse - Fires immediately when show is called
shown.bs.collapse - Fires when collapse is fully visible
hide.bs.collapse - Fires immediately when hide is called
hidden.bs.collapse - Fires when collapse is fully hidden

Accordion Methods

Available JavaScript methods for accordion control:

// Get accordion element
var myCollapse = document.getElementById('myAccordion');

// Create instance
var collapse = new bootstrap.Collapse(myCollapse, {
    toggle: false,  // Don't toggle on initialization
    parent: '#accordionParent'  // Parent selector
});

// Methods
collapse.toggle();   // Toggle visibility
collapse.show();     // Show accordion
collapse.hide();     // Hide accordion
collapse.dispose();  // Destroy accordion instance

// Get or create instance
var instance = bootstrap.Collapse.getInstance(myCollapse);
var getOrCreate = bootstrap.Collapse.getOrCreateInstance(myCollapse);
    

Nested Accordions

Create accordions within accordions for complex hierarchies:

<div class="accordion" id="accordionParent">
    <div class="accordion-item">
        <h2 class="accordion-header" id="parentHeading">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#parentCollapse">
                Parent Item
            </button>
        </h2>
        <div id="parentCollapse" class="accordion-collapse collapse show" data-bs-parent="#accordionParent">
            <div class="accordion-body">
                <!-- Nested Accordion -->
                <div class="accordion" id="accordionChild">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="childHeading1">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#childCollapse1">
                                Child Item #1
                            </button>
                        </h2>
                        <div id="childCollapse1" class="accordion-collapse collapse" data-bs-parent="#accordionChild">
                            <div class="accordion-body">
                                Nested content here.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="childHeading2">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#childCollapse2">
                                Child Item #2
                            </button>
                        </h2>
                        <div id="childCollapse2" class="accordion-collapse collapse" data-bs-parent="#accordionChild">
                            <div class="accordion-body">
                                More nested content.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    

Caution: While nested accordions are possible, they can become confusing for users. Use them sparingly and ensure clear visual hierarchy.

Practice Exercise

Create a comprehensive FAQ page with:

An accordion with 5 FAQ items about a product or service
The first item should be open by default
Each answer should include formatted text, lists, and at least one link
Add a "Show All" and "Hide All" button using JavaScript
Create a nested accordion for one complex FAQ that has sub-questions

Best Practices:

Use descriptive, clear headings for accordion items
Keep accordion content concise and scannable
Consider opening the most important item by default
Use flush accordions when integrating into existing designs
Test keyboard navigation (Tab, Enter, Space)
Ensure proper ARIA attributes for accessibility
Use unique IDs for all accordion items
Consider always-open accordions for comparison tasks