Skip to content

Bootstrap Accordion

Accordions organize content into collapsible panels where users expand one section at a time. This lesson covers structure, single vs. multiple open panels, and styling variants.

Bootstrap Accordion Overview

An accordion is built from repeated .accordion-item blocks, each containing an .accordion-header button and an .accordion-collapse panel. The header button uses data-bs-toggle="collapse" and data-bs-target to control its matching panel, while data-bs-parent on the collapse element ties all panels together so opening one closes the others.

Omitting data-bs-parent turns the accordion into an 'always open' variant where multiple panels can be expanded simultaneously, and the .accordion-flush modifier removes borders and rounded corners for a simpler, edge-to-edge look.

Concept Description Common Usage
.accordion-item One collapsible section, header plus panel Building block repeated for each entry
.accordion-button Clickable header that toggles its panel FAQ questions, section titles
data-bs-parent Links panels so only one stays open Standard single-open accordion behavior
Always-open accordion Omitting data-bs-parent Allowing multiple panels open at once
.accordion-flush Removes borders/rounded corners Minimal, full-width accordion styling

Bootstrap Accordion Example

<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
        data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
        What is Bootstrap?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Bootstrap is a CSS and JavaScript framework for building responsive websites.
      </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="#faq2" aria-expanded="false" aria-controls="faq2">
        Is Bootstrap free to use?
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Yes, Bootstrap is open-source and free under the MIT license.
      </div>
    </div>
  </div>
</div>

Both accordion items share the same data-bs-parent value pointing to the outer accordion container, so opening the second panel automatically closes the first. The show class on the first panel's accordion-collapse renders it open by default, while collapsed on the second button reflects its closed initial state.

Top 10 Bootstrap Accordion Examples

These are the accordion structural patterns you'll reuse for FAQs and grouped content panels.

# Example Syntax
1 Accordion wrapper <div class="accordion" id="acc">...</div>
2 Accordion item <div class="accordion-item">...</div>
3 Accordion header button <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#p1">Title</button>
4 Default open panel <div class="accordion-collapse collapse show">...</div>
5 Default closed panel <div class="accordion-collapse collapse">...</div>
6 Collapsed button state class <button class="accordion-button collapsed">...</button>
7 Panel body content <div class="accordion-body">Content</div>
8 Always-open accordion item <div class="accordion-collapse collapse show">...</div> <!-- no data-bs-parent -->
9 Flush accordion style <div class="accordion accordion-flush">...</div>
10 Parent grouping attribute data-bs-parent="#acc"

Best Practices

  • Give each accordion panel a unique id and match it precisely in the trigger's data-bs-target.
  • Keep data-bs-parent pointed at the outer accordion container for standard single-open behavior.
  • Add show and the button's expanded aria state consistently for whichever panel opens by default.
  • Use accordion-flush for a simpler look inside sidebars or narrow containers.
  • Write clear, scannable accordion-button text since it doubles as the collapsed-state summary.
  • Avoid nesting one accordion inside another; it quickly becomes confusing to navigate.
  • Keep accordion-body content reasonably short so users aren't scrolling through a giant expanded panel.

Common Mistakes

  • Mismatching data-bs-target and the panel's id, causing the button to do nothing.
  • Forgetting to remove data-bs-parent when an always-open accordion is intended.
  • Leaving aria-expanded out of sync with the actual open/closed state.
  • Not adding the collapsed class to buttons whose panels start closed, causing a visual mismatch on load.
  • Overloading a single panel with unrelated content instead of splitting into multiple items.
  • Using an accordion for content that should always be visible, hurting discoverability and SEO.

Key Takeaways

  • Accordions are built from repeated accordion-item blocks with header buttons and collapse panels.
  • data-bs-parent links panels together so only one stays open at a time.
  • Omitting data-bs-parent creates an always-open accordion allowing multiple expanded panels.
  • accordion-flush removes borders for a minimal, edge-to-edge appearance.
  • Matching ids and data-bs-target values correctly is essential for the toggle to work.

Pro Tip

For FAQ pages, keep the first, most commonly asked question open by default (using the show class) so visitors immediately see the accordion is interactive and get a preview of the content style.

You now understand Bootstrap's accordion component. Continue to Bootstrap Carousel to build image and content sliders.