Bootstrap 5 Accordion: Complete Guide with Examples

Quick answer: A Bootstrap 5 accordion is a div.accordion holding several div.accordion-item children. Each item has an accordion-header button with data-bs-toggle="collapse" and a data-bs-target that matches the id of its accordion-collapse panel, which contains an accordion-body. Give every item the same data-bs-parent and only one panel stays open at a time. Add accordion-flush to drop the outer borders. The most common bug is a data-bs-target that does not match its panel id.

Part of our Bootstrap series. If the framework is not on your page yet, run through getting started with Bootstrap 5 first.

A minimal working accordion

Three items, one open at a time. The structure is identical for two items or twenty — only the ids and the labels change.

<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header" id="h1">
      <button class="accordion-button" type="button"
              data-bs-toggle="collapse" data-bs-target="#c1"
              data-bs-parent="#faqAccordion" aria-expanded="true"
              aria-controls="c1">What is Bootstrap?</button>
    </h2>
    <div id="c1" class="accordion-collapse collapse show"
         aria-labelledby="h1" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        A CSS framework for building responsive sites quickly.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="h2">
      <button class="accordion-button collapsed" type="button"
              data-bs-toggle="collapse" data-bs-target="#c2"
              data-bs-parent="#faqAccordion" aria-expanded="false"
              aria-controls="c2">Is it free?</button>
    </h2>
    <div id="c2" class="accordion-collapse collapse"
         aria-labelledby="h2" data-bs-parent="#faqAccordion">
      <div class="accordion-body">Yes — MIT licensed.</div>
    </div>
  </div>
</div>

Two attributes carry the whole component. data-bs-toggle="collapse" on the button wires up the click handler, and data-bs-target names the panel to open. The show class on a collapse panel makes it start open; the matching aria-expanded="true" keeps screen readers in sync. Bootstrap’s JavaScript swaps those values for you after the first click, so you only set the initial state.

The pieces and what each one does

Drop data-bs-parent from both the button and the panel and every item can stay open at once — useful for settings panels where the user may want to compare sections. Keep it when the content is mutually exclusive, like a FAQ or a wizard.

Variations you will actually use

<!-- Always open (no shared parent) -->
<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-button collapsed" data-bs-toggle="collapse"
            data-bs-target="#x1">Panel one</button>
    <div id="x1" class="accordion-collapse collapse">
      <div class="accordion-body">…</div>
    </div>
  </div>
</div>

<!-- Edge to edge inside a card -->
<div class="card">
  <div class="accordion accordion-flush" id="inner"> … </div>
</div>

Because an accordion is just the collapse plugin with styling, you can also drive it from JavaScript instead of data attributes. bootstrap.Collapse.getOrCreateInstance(document.querySelector('#c2')).show() opens a panel programmatically — handy when a link elsewhere on the page should jump the user straight into the right section.

Common mistakes

• Id mismatch. data-bs-target="#c1" needs an element with id="c1". A typo makes the button do nothing, silently.
• Using an anchor instead of a button. The header must be a real button so keyboard users can activate it with Enter or Space.
• Forgetting type="button". Inside a form the accordion header submits the form when clicked.
• Reusing ids. Panel ids must be unique on the page or the wrong panel opens.
• Skipping collapsed. Without it a closed item still shows the open-state chevron.

Accordions sit well next to other disclosure components. If you need a full-screen slide-out panel instead, the Bootstrap offcanvas guide covers it; for a floating dialog see the modal guide, and for menus that drop down from a button read the dropdown guide.

Want an instructor reviewing your components as you build them? Ampersand Academy teaches front-end development one-to-one, using your own project as the curriculum.

Frequently asked questions