BootstrapHow-ToBeginner · 4 min read

How to Create Accordion in Bootstrap: Simple Guide

To create an accordion in Bootstrap, use the accordion component with accordion-item, accordion-header, and accordion-collapse classes. Wrap collapsible content inside accordion-collapse with unique IDs and link headers using data-bs-target attributes.

📐

Syntax

The Bootstrap accordion uses a container with the accordion class. Each item has three parts: accordion-item for the container, accordion-header for the clickable title, and accordion-collapse for the collapsible content. The header button controls the collapse by referencing the content's unique ID with data-bs-target.

html

<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 item 1.
      </div>
    </div>
  </div>
</div>

Output

A single accordion item with a header labeled 'Accordion Item #1' that is expanded by default showing the content 'Content for item 1.'

💻

Example

This example shows a complete accordion with three items. Only one item can be open at a time. Clicking a header toggles its content.

html

<!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>
  <div class="container my-4">
    <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">
            This is the first item's 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">
            Accordion Item #2
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            This is the second item's content.
          </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">
            This is the third item's content.
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage showing an accordion with three items. The first item is open by default, showing its content. Clicking other headers opens their content and closes the others.

⚠️

Common Pitfalls

Not including Bootstrap's JavaScript bundle will prevent the accordion from working.
Using duplicate IDs for collapse elements breaks toggle behavior.
Missing data-bs-parent attribute causes multiple items to stay open simultaneously.
Forgetting aria-controls and aria-expanded hurts accessibility.

html

<!-- Wrong: Missing data-bs-parent, allows multiple open -->
<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">
        Item 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
      <div class="accordion-body">Content 1</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">
        Item 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
      <div class="accordion-body">Content 2</div>
    </div>
  </div>
</div>

<!-- Right: Includes data-bs-parent to allow only one open -->
<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">
        Item 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">Content 1</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">
        Item 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">Content 2</div>
    </div>
  </div>
</div>

📊

Quick Reference

accordion: Main container for all items.
accordion-item: Wraps each accordion section.
accordion-header: Contains the button that toggles content.
accordion-button: The clickable button with toggle attributes.
accordion-collapse: The collapsible content area.
data-bs-toggle="collapse": Enables collapse behavior on button.
data-bs-target="#id": Links button to content by ID.
data-bs-parent="#accordionId": Ensures only one item is open at a time.

✅

Key Takeaways

Use Bootstrap's accordion classes and unique IDs to create collapsible sections.

Include Bootstrap's JavaScript bundle for accordion functionality to work.

Add data-bs-parent attribute to allow only one open item at a time.

Ensure accessibility attributes like aria-expanded and aria-controls are present.

Avoid duplicate IDs and missing toggle attributes to prevent errors.