The Bootstrap 5 accordion lets users expand and collapse sections of content. It's built on top of the collapse component and handles the one-open-at-a-time behaviour automatically.

Basic Accordion

<div class="accordion" id="faqAccordion">

  <!-- Item 1 — open by default -->
  <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 frameworks does BootstrapPlanet cover?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show"
      data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Bootstrap 5, React with Tailwind CSS and shadcn/ui, and Angular 21 with Bootstrap 5.
        Over 200 free components with copy-paste code and live previews.
      </div>
    </div>
  </div>

  <!-- Item 2 — closed by default -->
  <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">
        Are all the components free to use?
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse"
      data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Yes. Everything on BootstrapPlanet is completely free. No signup, no paywall.
        Just copy the code and use it in your project.
      </div>
    </div>
  </div>

  <!-- Item 3 -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button"
        data-bs-toggle="collapse" data-bs-target="#faq3"
        aria-expanded="false" aria-controls="faq3">
        Do you have premium templates?
      </button>
    </h2>
    <div id="faq3" class="accordion-collapse collapse"
      data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Yes. Full Angular 21 + Bootstrap 5 admin templates are at
        <a href="https://lettstartdesign.com" style="color:#fd4766;">LettStartDesign.com</a>.
        Use code <strong>FIRST30</strong> for 30% off.
      </div>
    </div>
  </div>

</div>

The three key attributes that make it work:

  • data-bs-toggle="collapse" on the button — triggers Bootstrap's collapse JS
  • data-bs-target="#id" — points to the panel to toggle
  • data-bs-parent="#accordionId" on the panel — closes other open items

Always-Open Accordion

Multiple items can be open simultaneously — just remove data-bs-parent:

<div class="accordion" id="alwaysOpenAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button"
        data-bs-toggle="collapse" data-bs-target="#ao1">
        Bootstrap 5 Components
      </button>
    </h2>
    <div id="ao1" class="accordion-collapse collapse show">
      <!-- NO data-bs-parent here -->
      <div class="accordion-body">
        80+ free Bootstrap 5 components with live previews. Navbars, cards, forms, tables and more.
      </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="#ao2">
        React Components
      </button>
    </h2>
    <div id="ao2" class="accordion-collapse collapse">
      <!-- NO data-bs-parent here -->
      <div class="accordion-body">
        40 React components built with Tailwind CSS and shadcn/ui.
      </div>
    </div>
  </div>
</div>

Flush Accordion

Removes outer borders and rounded corners — flushes to the edge of its container:

<div class="accordion accordion-flush" id="flushAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button"
        data-bs-toggle="collapse" data-bs-target="#fl1"
        data-bs-parent="#flushAccordion">
        Angular 21 Templates
      </button>
    </h2>
    <div id="fl1" class="accordion-collapse collapse">
      <div class="accordion-body text-muted small">
        Full Angular 21 + Bootstrap 5 admin dashboards with dark mode and RTL support.
      </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="#fl2"
        data-bs-parent="#flushAccordion">
        React Templates
      </button>
    </h2>
    <div id="fl2" class="accordion-collapse collapse">
      <div class="accordion-body text-muted small">
        React 19 + Next.js 15 dashboard templates with TypeScript and Tailwind.
      </div>
    </div>
  </div>
</div>

Flush accordions work best inside cards, sidebars and off-canvas panels where you want the content to fill the container edge-to-edge.

Custom Styled Accordion

Override Bootstrap's CSS variables for a custom look:

<style>
  .custom-accordion .accordion-item {
    border: none;
    margin-bottom: 8px;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .custom-accordion .accordion-button {
    font-weight: 600;
    font-size: 0.9rem;
    background: #fff;
    color: #111;
    padding: 14px 18px;
  }
  .custom-accordion .accordion-button:not(.collapsed) {
    background: rgba(253,71,102,0.06);
    color: #fd4766;
    box-shadow: none;
  }
  .custom-accordion .accordion-button::after {
    /* Custom arrow color */
    filter: none;
  }
  .custom-accordion .accordion-button:not(.collapsed)::after {
    filter: invert(30%) sepia(90%) saturate(500%) hue-rotate(320deg);
  }
  .custom-accordion .accordion-body {
    font-size: 0.88rem;
    color: #6b7280;
    padding: 12px 18px 16px;
  }
</style>

<div class="accordion custom-accordion" id="customAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button"
        data-bs-toggle="collapse" data-bs-target="#ca1"
        data-bs-parent="#customAccordion">
        What's included in the Pro template?
      </button>
    </h2>
    <div id="ca1" class="accordion-collapse collapse show">
      <div class="accordion-body">
        Angular 21 source files, 50+ UI components, dark mode, RTL support, 4 layout variants
        and 12 months of free updates.
      </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="#ca2"
        data-bs-parent="#customAccordion">
        How do I get support?
      </button>
    </h2>
    <div id="ca2" class="accordion-collapse collapse">
      <div class="accordion-body">
        Email support is included with all purchases. Pro customers get priority response.
        Typical response time is under 24 hours.
      </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="#ca3"
        data-bs-parent="#customAccordion">
        Can I use this for client projects?
      </button>
    </h2>
    <div id="ca3" class="accordion-collapse collapse">
      <div class="accordion-body">
        Yes. Single developer licence covers unlimited personal and commercial projects.
        Multi-developer licence covers up to 5 developers.
      </div>
    </div>
  </div>
</div>

Controlling Accordion with JavaScript

Open, close or toggle accordion items programmatically:

// Open a specific item
const collapseEl = document.getElementById('faq1')
const collapse = new bootstrap.Collapse(collapseEl, { toggle: false })
collapse.show()

// Close a specific item
collapse.hide()

// Toggle
collapse.toggle()

// Open all items (remove data-bs-parent first)
document.querySelectorAll('.accordion-collapse').forEach(el => {
  new bootstrap.Collapse(el, { toggle: false }).show()
})

// Close all items
document.querySelectorAll('.accordion-collapse').forEach(el => {
  bootstrap.Collapse.getInstance(el)?.hide()
})

Listen for Accordion Events

const accordionEl = document.getElementById('faqAccordion')

// Fires when an item finishes opening
accordionEl.addEventListener('shown.bs.collapse', function(e) {
  console.log('Opened:', e.target.id)
})

// Fires when an item finishes closing
accordionEl.addEventListener('hidden.bs.collapse', function(e) {
  console.log('Closed:', e.target.id)
})

Useful for analytics — tracking which FAQ questions users expand, or lazy-loading content when a panel opens.

Accordion in a Card

Flush accordion inside a card gives a clean settings panel look:

<div class="card border-0 shadow-sm">
  <div class="card-header bg-white fw-bold py-3">Account Settings</div>
  <div class="accordion accordion-flush" id="settingsAccordion">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed py-3" type="button"
          data-bs-toggle="collapse" data-bs-target="#s1"
          data-bs-parent="#settingsAccordion">
          👤 Profile Information
        </button>
      </h2>
      <div id="s1" class="accordion-collapse collapse">
        <div class="accordion-body">
          <div class="mb-3">
            <label class="form-label small">Full Name</label>
            <input type="text" class="form-control form-control-sm" value="Gagan Singh">
          </div>
          <button class="btn btn-sm text-white" style="background:#fd4766;">Save</button>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed py-3" type="button"
          data-bs-toggle="collapse" data-bs-target="#s2"
          data-bs-parent="#settingsAccordion">
          🔒 Change Password
        </button>
      </h2>
      <div id="s2" class="accordion-collapse collapse">
        <div class="accordion-body">
          <div class="mb-2">
            <label class="form-label small">Current Password</label>
            <input type="password" class="form-control form-control-sm" placeholder="••••••••">
          </div>
          <div class="mb-3">
            <label class="form-label small">New Password</label>
            <input type="password" class="form-control form-control-sm" placeholder="••••••••">
          </div>
          <button class="btn btn-sm btn-outline-secondary">Update Password</button>
        </div>
      </div>
    </div>
  </div>
</div>

Frequently Asked Questions

Bootstrap accordion uses the collapse component with data-bs-parent pointing to the accordion container. When one item opens, data-bs-parent ensures the previously open item closes. Each item has a button trigger and a collapse div with the content.
Remove the data-bs-parent attribute from each accordion-collapse div. Without data-bs-parent, items toggle independently. Alternatively use the always-open variant which is explicitly designed for this.
Add the show class to the accordion-collapse div and remove the collapsed class from its button. In the button add aria-expanded='true'. These three changes make that item open on page load.
The accordion uses --bs-accordion-* CSS variables you can override: --bs-accordion-border-color, --bs-accordion-btn-bg, --bs-accordion-active-color, --bs-accordion-active-bg. Or target the classes directly: .accordion-button, .accordion-item, .accordion-body.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Accordion Example

View examples →

Bootstrap 5 Collapse Example

View examples →

Bootstrap 5 Card Tutorial

View examples →