What is Accordion component in Bootsrap?

Bootsrapmarkup~5 mins

Accordion component in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

An accordion helps show or hide sections of content on a page. It keeps the page neat and easy to read.

You want to organize FAQs so users can open one question at a time.

You have a long list of items and want to save space by hiding details.

You want to let users expand or collapse sections without leaving the page.

You want a simple way to show multiple content panels but only one open at a time.

Syntax

Bootsrap

<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">
        Content for the first accordion item.
      </div>
    </div>
  </div>
  <!-- Repeat accordion-item blocks for more items -->
</div>

Use data-bs-toggle="collapse" on the button to make it open or close the content.

The data-bs-parent attribute makes sure only one item is open at a time.

Examples

This example shows a single accordion item open by default using collapse show.

Bootsrap

<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">
        First Item
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the first item's content.
      </div>
    </div>
  </div>
</div>

This example shows an accordion item closed by default with the button having the collapsed class.

Bootsrap

<div class="accordion" id="accordionExample">
  <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">
        Second Item
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Content for the second item, hidden initially.
      </div>
    </div>
  </div>
</div>

Sample Program

This complete example shows a Bootstrap accordion with three items. The first item is open by default. Clicking on each header toggles its content. Only one item can be open at a time.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Accordion Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container my-5">
    <h1>Simple Accordion</h1>
    <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">
            What is an accordion?
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            An accordion is a UI component that lets you expand and collapse sections of content.
          </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">
            Why use an accordion?
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            It helps keep pages clean by hiding content until the user wants to see it.
          </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">
            How to use it?
          </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            Use Bootstrap classes and data attributes to create the accordion structure and behavior.
          </div>
        </div>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

OutputSuccess

Important Notes

Always include aria-expanded and aria-controls for accessibility.

Use the Bootstrap JavaScript bundle to enable the accordion's interactive behavior.

The data-bs-parent attribute ensures only one accordion item is open at a time.

Summary

An accordion shows or hides content sections to keep pages tidy.

Bootstrap uses specific classes and data attributes to create accordions easily.

Accessibility attributes help screen readers understand the accordion's state.