Bootstrap Accordion

An Accordion is a user interface component that displays content in expandable and collapsible sections.

For example, an FAQ section can contain questions that users can click to reveal their answers.

• FAQ sections
• Course topics
• Documentation
• Product information
• Settings panels
• Student information

A Bootstrap Accordion normally uses the .accordion container along with .accordion-item, .accordion-header, and .accordion-collapse.

<div class="accordion" id="myAccordion">

    <div class="accordion-item">

        <h2 class="accordion-header">

            <button
            class="accordion-button"
            type="button">

            Section 1

            </button>

        </h2>

        <div class="accordion-collapse">

            <div class="accordion-body">

            Content

            </div>

        </div>

    </div>

</div>

The .accordion class creates the main Accordion container.

<div
class="accordion"
id="myAccordion">

    ...

</div>

The Accordion container normally has a unique id so its child sections can be connected correctly.

Each section of an Accordion is placed inside an .accordion-item.

<div class="accordion-item">

    ...

</div>

An Accordion can contain multiple Accordion items.

The .accordion-header class is used for the heading section of an Accordion item.

<h2 class="accordion-header">

    ...

</h2>

The heading normally contains the button that opens or closes the Accordion content.

The .accordion-button class styles the button used to expand or collapse an Accordion section.

<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne">

First Section

</button>

The data-bs-target points to the content that should be shown or hidden.

The .accordion-collapse class is used for the collapsible content area.

<div
id="collapseOne"
class="accordion-collapse collapse">

    ...

</div>

The collapse class provides the collapsible behavior.

The .accordion-body class contains the actual content inside an Accordion section.

<div class="accordion-body">

    This is the Accordion content.

</div>

You can place text, links, lists, images, forms, tables, and other Bootstrap components inside the Accordion body.

The following example creates a simple Accordion with one expandable section.

<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">

            What is Bootstrap?

            </button>

        </h2>

        <div
        id="collapseOne"
        class="accordion-collapse collapse show"
        data-bs-parent="#accordionExample">

            <div class="accordion-body">

            Bootstrap is a popular front-end framework.

            </div>

        </div>

    </div>

</div>

Adding the show class to the collapsible section makes that section visible when the page loads.

<div
class="accordion-collapse collapse show">

    ...

</div>

If show is removed, the section starts collapsed.

The data-bs-parent attribute connects an Accordion item to the main Accordion container.

<div
class="accordion-collapse collapse"
data-bs-parent="#myAccordion">

    ...

</div>

When used in a standard Accordion, it allows the Accordion behavior where opening one section closes another section in the same parent.

An Accordion can contain many sections.

<div class="accordion"
id="myAccordion">

    <div class="accordion-item">
        ...
    </div>

    <div class="accordion-item">
        ...
    </div>

    <div class="accordion-item">
        ...
    </div>

</div>

Each item should have its own unique IDs and matching data-bs-target and ARIA references.

The following example demonstrates three Accordion sections.

Accordion is commonly used for Frequently Asked Questions.

The data-bs-parent attribute is not mandatory for every Collapse component. Without it, multiple sections can remain open at the same time.

<div
class="accordion-collapse collapse"
id="sectionOne">

    ...

</div>

<div
class="accordion-collapse collapse"
id="sectionTwo">

    ...

</div>

This can be useful when you want independent expandable sections.

Bootstrap automatically changes the visual state of an .accordion-button based on whether the related section is expanded or collapsed.

<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sectionOne"
aria-expanded="false">

Section

</button>

The aria-expanded attribute communicates the expanded state to assistive technologies.

The aria-expanded attribute indicates whether the related Accordion section is currently expanded.

<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sectionOne"
aria-expanded="true"
aria-controls="sectionOne">

Section One

</button>

Use true for an expanded section and false for a collapsed section.

The aria-controls attribute identifies the collapsible element controlled by the Accordion button.

<button
class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#courseContent"
aria-controls="courseContent">

Course Content

</button>

The value should match the id of the controlled element.

You can place lists inside an Accordion body.

<div class="accordion-body">

    <ul>

        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>

    </ul>

</div>

Tables can also be placed inside an Accordion body.

<div class="accordion-body">

    <table class="table">

        <tr>
            <th>Course</th>
            <th>Duration</th>
        </tr>

        <tr>
            <td>HTML</td>
            <td>1 Month</td>
        </tr>

    </table>

</div>

Forms can be placed inside an Accordion when different sections of a form need to be organized.

<div class="accordion-body">

    <label
    class="form-label">

    Student Name

    </label>

    <input
    type="text"
    class="form-control">

</div>

This approach can be useful for long registration forms or profile forms.

Learning websites can use Accordion sections to organize course lessons.

Use .accordion-flush to remove the outer borders and rounded corners from the Accordion.

<div
class="accordion accordion-flush"
id="flushAccordion">

    ...

</div>

Accessibility should be considered when creating Accordion components.

• Use proper heading elements for Accordion headers.
• Use descriptive button text.
• Use aria-expanded to communicate state.
• Use aria-controls to identify controlled content.
• Ensure buttons are keyboard accessible.
• Do not hide essential information only inside collapsed content.

Avoid these common Accordion mistakes:

• Using duplicate IDs.
• Using the wrong data-bs-target.
• Forgetting the collapse class.
• Forgetting the Bootstrap JavaScript bundle.
• Using unclear Accordion titles.
• Incorrectly matching aria-controls.
• Using the same ID for multiple sections.
• Putting important information only inside a collapsed section.

Bootstrap Accordion is based on the Collapse component and can also be controlled with JavaScript.

const element =
document.getElementById('courseOne');

const collapse =
new bootstrap.Collapse(
element,
{
toggle: false
}
);

collapse.show();

The show() method opens the collapsible section.

The Collapse API provides methods for controlling Accordion sections.

const element =
document.getElementById('courseOne');

const collapse =
bootstrap.Collapse.getInstance(
element
);

collapse.hide();

The hide() method closes the section.

Because Accordion sections use Bootstrap's Collapse component, you can listen for Collapse events.

Some useful events include:

• show.bs.collapse
• shown.bs.collapse
• hide.bs.collapse
• hidden.bs.collapse

const section =
document.getElementById('courseOne');

section.addEventListener(
'shown.bs.collapse',
function(){

    console.log(
    'Accordion section opened'
    );

});

The following example creates a practical FAQ Accordion.

<div
class="accordion"
id="faqProject">

    <div class="accordion-item">

        <h2
        class="accordion-header"
        id="faqHeadingOne">

            <button
            class="accordion-button"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#faqCollapseOne"
            aria-expanded="true"
            aria-controls="faqCollapseOne">

            How do I enroll?

            </button>

        </h2>

        <div
        id="faqCollapseOne"
        class="accordion-collapse collapse show"
        aria-labelledby="faqHeadingOne"
        data-bs-parent="#faqProject">

            <div class="accordion-body">

            Complete the admission form and submit your details.

            </div>

        </div>

    </div>

</div>

This complete example demonstrates multiple Accordion sections with headings, content, ARIA attributes, and the parent relationship.

<div
class="accordion"
id="completeAccordion">


    <div class="accordion-item">

        <h2
        class="accordion-header"
        id="completeHeadingOne">

            <button
            class="accordion-button"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#completeOne"
            aria-expanded="true"
            aria-controls="completeOne">

            HTML Course

            </button>

        </h2>


        <div
        id="completeOne"
        class="accordion-collapse collapse show"
        aria-labelledby="completeHeadingOne"
        data-bs-parent="#completeAccordion">

            <div class="accordion-body">

            Learn HTML elements, attributes, forms, tables,
            links, images, and semantic HTML.

            </div>

        </div>

    </div>


    <div class="accordion-item">

        <h2
        class="accordion-header"
        id="completeHeadingTwo">

            <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#completeTwo"
            aria-expanded="false"
            aria-controls="completeTwo">

            CSS Course

            </button>

        </h2>


        <div
        id="completeTwo"
        class="accordion-collapse collapse"
        aria-labelledby="completeHeadingTwo"
        data-bs-parent="#completeAccordion">

            <div class="accordion-body">

            Learn selectors, colors, typography, layouts,
            Flexbox, Grid, and responsive design.

            </div>

        </div>

    </div>


    <div class="accordion-item">

        <h2
        class="accordion-header"
        id="completeHeadingThree">

            <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#completeThree"
            aria-expanded="false"
            aria-controls="completeThree">

            Bootstrap Course

            </button>

        </h2>


        <div
        id="completeThree"
        class="accordion-collapse collapse"
        aria-labelledby="completeHeadingThree"
        data-bs-parent="#completeAccordion">

            <div class="accordion-body">

            Learn Bootstrap components, utilities,
            responsive layouts, forms, navigation, and projects.

            </div>

        </div>

    </div>


</div>