Bootstrap Accordion: Bootstrap 5 Guide with Examples

A Bootstrap accordion is a stack of sections where each header opens and closes its own panel. It is the usual way to build an FAQ, a settings page with groups, or product details on a phone, where showing everything at once would be too long. The accordion is built on Bootstrap’s collapse plugin and works from markup alone. This guide covers the markup, keeping several panels open, the flush style, opening a panel by default, changing the colors and the arrow icon, controlling panels with JavaScript, and making an FAQ accordion search engines understand. Everything is for Bootstrap 5.3. For show-and-hide content without the accordion styling, see Bootstrap collapse.

A working accordion

<div class="accordion" id="faq">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
        data-bs-target="#faq-1" aria-expanded="true" aria-controls="faq-1">
        Can I cancel anytime?
      </button>
    </h2>
    <div id="faq-1" class="accordion-collapse collapse show" data-bs-parent="#faq">
      <div class="accordion-body">Yes. Cancel from your account page and you won't be charged again.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
        data-bs-target="#faq-2" aria-expanded="false" aria-controls="faq-2">
        Do you offer refunds?
      </button>
    </h2>
    <div id="faq-2" class="accordion-collapse collapse" data-bs-parent="#faq">
      <div class="accordion-body">Within 14 days of payment, for any reason.</div>
    </div>
  </div>
</div>

Load Bootstrap’s JavaScript bundle and it works; no initialization is needed.

Keep the button’s collapsed class, aria-expanded, and the panel’s show class in agreement: an open panel has show and a button with aria-expanded="true" and no collapsed class.

Keep several panels open

Remove data-bs-parent from every panel. Each section then opens and closes on its own without closing the others:

<div id="faq-1" class="accordion-collapse collapse show">...</div>

All panels closed at the start

Give every button the collapsed class and aria-expanded="false", and remove show from every panel. To open a different panel first, move those changes to it.

The flush style

accordion-flush removes the outer border and rounded corners, so the accordion sits edge to edge inside a card, sidebar, or offcanvas menu:

<div class="accordion accordion-flush" id="settings">...</div>

Change the colors

The accordion uses CSS variables. The open header uses a light tint of the primary color by default:

.accordion {
  --bs-accordion-active-bg: #eef2ff;
  --bs-accordion-active-color: #1e3a8a;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(47, 85, 255, .25);
  --bs-accordion-border-color: #c9d4ff;
  --bs-accordion-btn-padding-y: .875rem;
}

To keep the header white when open, set --bs-accordion-active-bg to var(--bs-body-bg). The accordion follows dark mode, and its colors come from $primary, so changing the primary color restyles it too.

Change or move the arrow icon

The arrow is a background image on the button’s ::after. Swap it for a plus and minus with the two icon variables:

.accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M3 8h10'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-transform: none;
}

--bs-accordion-btn-icon-transform: none stops the icon from rotating, which the arrow needs but a plus and minus don’t. To put the icon on the left:

.accordion-button::after { order: -1; margin-left: 0; margin-right: .75rem; }

To hide it, use .accordion-button::after { display: none; }.

Control panels with JavaScript

Each panel is a collapse instance:

const panel = bootstrap.Collapse.getOrCreateInstance('#faq-2', { toggle: false })
panel.show()
panel.hide()

toggle: false stops the panel from toggling when the instance is created. An “expand all” button for an accordion without data-bs-parent:

document.querySelector('#expand-all').addEventListener('click', () => {
  document.querySelectorAll('#faq .accordion-collapse').forEach(el => {
    bootstrap.Collapse.getOrCreateInstance(el, { toggle: false }).show()
  })
})

Listen for show.bs.collapse and shown.bs.collapse on a panel to load its content only when it opens.

FAQ accordions and search engines

Hidden accordion text is still in the HTML, so search engines can read it. To make the questions eligible for FAQ results, describe them with FAQPage structured data in a JSON-LD script, using the same questions and answers that are on the page.

Accordion or details element?

HTML’s <details> and <summary> also open and close without JavaScript:

<details class="border rounded p-3 mb-2">
  <summary class="fw-semibold">Can I cancel anytime?</summary>
  <p class="mt-2 mb-0">Yes, from your account page.</p>
</details>

Use <details> for a simple list with no styling needs. Use the Bootstrap accordion when you want the animation, the matching look, or one-open-at-a-time behavior.

Common problems

Clicking does nothing. Bootstrap’s JavaScript isn’t loaded, or data-bs-target doesn’t match the panel’s id. Ids must be unique on the page, so two accordions can’t both use #faq-1.

Opening one panel doesn’t close the others. The panels are missing data-bs-parent, or it doesn’t point to the accordion’s id.

The arrow points the wrong way. The button has collapsed while its panel has show, or the other way round. Match them.

The Bootstrap 4 card-based accordion doesn’t work. Bootstrap 5 replaced it with the .accordion classes and data-bs-* attributes shown above.

FAQ

How do I make a Bootstrap accordion?

Wrap .accordion-item sections in a .accordion with an id. Each section has an .accordion-header with an .accordion-button that uses data-bs-toggle="collapse" and data-bs-target, and an .accordion-collapse.collapse panel with an .accordion-body. It works with Bootstrap’s JavaScript and no extra code.

How do I keep multiple accordion items open in Bootstrap?

Remove the data-bs-parent attribute from each .accordion-collapse panel. Without it, opening one panel doesn’t close the others.

How do I make all Bootstrap accordion items closed by default?

Remove the show class from every .accordion-collapse panel, and give every .accordion-button the collapsed class and aria-expanded="false".

How do I change the Bootstrap accordion arrow icon?

Set the --bs-accordion-btn-icon and --bs-accordion-btn-active-icon CSS variables to new SVG images, and --bs-accordion-btn-icon-transform: none if the icon shouldn’t rotate. To hide it, set .accordion-button::after { display: none; }.

How do I change the background color of an open accordion header?

Set the --bs-accordion-active-bg and --bs-accordion-active-color CSS variables on .accordion. The default is a light tint of the primary color.