Skip to content

Bootstrap Accordion — Collapsible Content Panels

DodaTech Updated 2026-06-28 4 min read

In this tutorial, you will learn about Bootstrap Accordion. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap accordion organizes content into collapsible panels where clicking a header toggles the visibility of its associated body content with smooth animations.

What You'll Learn

You will learn how to build accordions with multiple items, configure single or multiple open panels, add icons to accordion headers, and style accordion variants.

Why It Matters

Accordions save vertical space by hiding content until needed. DodaTech's FAQ page uses an accordion to display questions and answers compactly.

Real-World Use

Durga Antivirus Pro's settings panel uses an accordion to group configuration sections (General, Scanning, Updates, Exclusions) where each section expands when clicked.

flowchart LR
    A[Carousel] --> B[Accordion]
    B --> C[Accordion Items]
    B --> D[Single/Multi Open]
    B --> E[Styling]
    B --> F[Icons]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Basic Accordion

<div class="accordion" id="basicAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <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"
         data-bs-parent="#basicAccordion">
      <div class="accordion-body">
        This is the first item's body content. It is shown by default because of the <code>show</code> class.
      </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="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse"
         data-bs-parent="#basicAccordion">
      <div class="accordion-body">
        This item starts collapsed. Click the header to expand it.
      </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="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse"
         data-bs-parent="#basicAccordion">
      <div class="accordion-body">
        This item also starts collapsed.
      </div>
    </div>
  </div>
</div>

Expected output: Three collapsible panels. The first is open by default. Clicking another header closes the current one and opens the clicked one.

Flush Accordion

<div class="accordion accordion-flush" id="flushAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" data-bs-toggle="collapse"
              data-bs-target="#flushOne">
        Flush Item #1
      </button>
    </h2>
    <div id="flushOne" class="accordion-collapse collapse" data-bs-parent="#flushAccordion">
      <div class="accordion-body">Flush accordion removes borders and background for seamless integration.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" data-bs-toggle="collapse"
              data-bs-target="#flushTwo">
        Flush Item #2
      </button>
    </h2>
    <div id="flushTwo" class="accordion-collapse collapse" data-bs-parent="#flushAccordion">
      <div class="accordion-body">No outer borders, no rounded corners.</div>
    </div>
  </div>
</div>

Expected output: An accordion without outer borders or rounded corners, designed to sit flush with its container.

Always Open (Multiple Panels)

<div class="accordion" id="multiOpenAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#multiOne">
        Panel 1
      </button>
    </h2>
    <div id="multiOne" class="accordion-collapse collapse show">
      <div class="accordion-body">Content for panel 1.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#multiTwo">
        Panel 2
      </button>
    </h2>
    <div id="multiTwo" class="accordion-collapse collapse">
      <div class="accordion-body">Content for panel 2.</div>
    </div>
  </div>
</div>

Expected output: Two panels that can be open simultaneously because the collapse containers do not have data-bs-parent attribute.

Accordion with Icons

<div class="accordion" id="iconAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#iconOne">
        <span class="me-2">Settings</span>
      </button>
    </h2>
    <div id="iconOne" class="accordion-collapse collapse show" data-bs-parent="#iconAccordion">
      <div class="accordion-body">General settings and preferences.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#iconTwo">
        <span class="me-2">Security</span>
      </button>
    </h2>
    <div id="iconTwo" class="accordion-collapse collapse" data-bs-parent="#iconAccordion">
      <div class="accordion-body">Security-related configuration options.</div>
    </div>
  </div>
</div>

Expected output: Accordion items with icons (via Bootstrap Icons or other icon libraries) in the header buttons.

Common Mistakes

1. Missing data-bs-parent for Single Open Behavior

Without data-bs-parent="#accordionId" on collapse containers, multiple panels can be open simultaneously. Add it for exclusive accordion behavior.

2. Forgetting collapsed Class on Closed Buttons

Closed accordion buttons need the collapsed class. Without it, the button icon arrow points down instead of up.

3. Incorrect aria-expanded State

The aria-expanded attribute must reflect the actual state of the collapse (true when open, false when closed). Bootstrap updates this automatically when using data attributes.

4. Not Using show Class on Default Open Panel

The show class on accordion-collapse makes the panel visible initially. Without it, all panels start closed.

5. Nested Accordions Causing Conflicts

Nesting accordions inside accordion bodies can cause collapse conflicts. Give nested accordions unique ids and separate data-bs-parent references.

Practice Questions

  1. What class makes the first panel visible by default? show on the accordion-collapse div opens the panel initially.

  2. How do you create a flush accordion without borders? Add accordion-flush class to the accordion container.

  3. How do you allow multiple panels to be open simultaneously? Remove or omit the data-bs-parent attribute from the collapse containers.

  4. What class indicates a collapsed accordion button? collapsed on the accordion-button indicates the panel is closed and the arrow points down.

  5. What attribute links a button to its collapse content? data-bs-target="#collapseId" on the button matches the collapse div's id.

Challenge

Build an FAQ section with 5 questions in an accordion. Use accordion-flush, allow multiple open panels, and include icons in the headers. Make the first FAQ item open by default.

FAQ

Can accordions contain forms?

Yes. Accordion bodies can contain any HTML, including forms, tables, images, and other components.

How do I open an accordion panel programmatically?

Use bootstrap.Collapse.getOrCreateInstance(collapseElement).show() with the specific collapse target.

What is the difference between accordion and collapse?

Accordion is a specialized use of collapse that groups multiple collapse items with single-open behavior via data-bs-parent.

Can I change the accordion button icon?

Yes. Override the background-image on accordion-button for custom arrow icons, or use a different icon library inside the button.

Do accordions work without JavaScript?

No. The collapse/show behavior requires Bootstrap's JavaScript. Without JS, all panels remain visible.

Mini Project

Build a product documentation page with an accordion containing sections: Getting Started, Installation, Configuration, Troubleshooting, and FAQ. Use accordion-flush with icons and allow multiple open panels.

What's Next

Learn Tooltips and Popovers for hover information. Then explore Toasts and Alerts for notification messages.

← Previous Bootstrap Carousel — Image Sliders and Slideshows Next → Bootstrap Tooltips & Popovers — Hover Information Components

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap