Accordion and Collapse Panels

1. Lesson Introduction

(1) Prerequisites

Lesson 15: Alert Components

(2) 🎯 What You Will Learn

Use Collapse to expand/collapse a single element
Use Accordion for linked accordion behavior
Use accordion-flush to remove borders
Use data-bs-parent to control linked behavior
Implement independent collapse panels (always-open mode)

(3) Pain Point

Bob is building a FAQ page with 8 common questions. He wants to implement this using an Accordion: when a user clicks a question, the answer expands, and clicking another one automatically collapses the previous one, providing a smooth experience and saving page space.

(4) Solution

The Collapse component is used to display large amounts of content in limited space. Users click a title to reveal details and click again to hide it. Accordion is a special form of the Collapse component: only one panel remains open at a time.

(5) Benefits

Using an accordion allows organizing large amounts of content within limited space, keeping the page clean and improving the browsing experience.

2. Single Collapse Panel

The most basic Collapse component:

HTML

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    Toggle content
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content is hidden by default. Click the button to show or hide it.
  </div>
</div>

▶ Try it Yourself

▶ Example: Basic Collapse Panel

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapse Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <p>
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#singleCollapse" role="button">
        Toggle with link
      </a>
      <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#singleCollapse">
        Toggle with button
      </button>
    </p>
    <div class="collapse" id="singleCollapse">
      <div class="card card-body">
        This content can be toggled using either the link or the button.
      </div>
    </div>

    <hr>

    <p>
      <button class="btn btn-success" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
        Toggle both
      </button>
    </p>
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse1">
          <div class="card card-body">First collapsible panel.</div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse2">
          <div class="card card-body">Second collapsible panel.</div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Try it Yourself

(1) Collapse Key Attributes

Attribute/Class	Description
`data-bs-toggle="collapse"`	Declares the trigger
`data-bs-target="#id"`	Specifies the element to collapse
`class="collapse"`	Hidden by default
`class="collapse show"`	Shown by default (expanded state)
`data-bs-parent="#accordion"`	Linked control (used for Accordion)

3. Accordion

Accordion is a linked combination of multiple collapse panels, where at most one can be expanded at a time.

HTML

<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">
        How do I install Bootstrap?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Add the CDN link to your HTML head.
      </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">
        Does Bootstrap need jQuery?
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        No, Bootstrap 5 uses vanilla JavaScript.
      </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="#faq3">
        What is the grid system?
      </button>
    </h2>
    <div id="faq3" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Bootstrap uses a 12-column flexbox grid system.
      </div>
    </div>
  </div>
</div>

▶ Try it Yourself

(1) Accordion Structure

Element	Class	Description
Container	`accordion`	Declares the accordion group
Item	`accordion-item`	A single collapse panel
Header	`accordion-header`	Header row container
Trigger	`accordion-button`	Clickable title button
Content Area	`accordion-collapse collapse`	Collapsible content
Content Body	`accordion-body`	The actual displayed text

(2) Key Mechanism

HTML

data-bs-parent="#faqAccordion"  // Linked (only one open at a time)
class="accordion-collapse collapse show"  // Default expanded
class="accordion-button collapsed"  // Collapsed state

▶ Try it Yourself

4. Accordion Variations

HTML

<!-- Flush (no outer border) -->
<div class="accordion accordion-flush">
  <div class="accordion-item">...</div>
</div>

<!-- Always-open mode (remove data-bs-parent) -->
<div class="accordion" id="multiOpen">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#panel1">
        Panel 1
      </button>
    </h2>
    <!-- No data-bs-parent — independent -->
    <div id="panel1" class="accordion-collapse collapse show">
      <div class="accordion-body">This panel stays open when Panel 2 is opened.</div>
    </div>
  </div>
</div>

▶ Try it Yourself

5. More Collapse Panel Examples

▶ Example: FAQ Accordion (Borderless)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAQ Accordion</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="accordion accordion-flush" id="faqAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#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 free front-end framework for building responsive websites with HTML, CSS, and JavaScript.</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">
            Do I need to know JavaScript?
          </button>
        </h2>
        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Basic Bootstrap components work without JS. Interactive components like modals and carousels need Bootstrap JS.</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="#faq3">
            Is Bootstrap free?
          </button>
        </h2>
        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Yes, Bootstrap is completely free and open-source under the MIT license.</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="#faq4">
            What is the grid system?
          </button>
        </h2>
        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Bootstrap's grid uses 12 columns with breakpoints for responsive layouts. Classes like col-md-6 create columns that adjust at different screen sizes.</div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Try it Yourself

▶ Example: Always-Open Mode (Independent Panels)

HTML

<div class="accordion" id="independentAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelA">
        Skills & Expertise
      </button>
    </h2>
    <div id="panelA" class="accordion-collapse collapse show">
      <div class="accordion-body">HTML, CSS, JavaScript, Bootstrap, React</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="#panelB">
        Work Experience
      </button>
    </h2>
    <div id="panelB" class="accordion-collapse collapse show">
      <div class="accordion-body">Senior Developer at TechCorp (2020-present), Frontend Developer at WebStudio (2018-2020)</div>
    </div>
  </div>
</div>

▶ Try it Yourself

▶ Example: Independent Collapse Components

HTML

<div class="container py-4">
  <div class="d-flex gap-2 mb-3">
    <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo1">
      Toggle First
    </button>
    <button class="btn btn-outline-success" data-bs-toggle="collapse" data-bs-target="#demo2">
      Toggle Second
    </button>
    <button class="btn btn-outline-danger" data-bs-toggle="collapse" data-bs-target=".multi-demo">
      Toggle All
    </button>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="collapse multi-demo show" id="demo1">
        <div class="card card-body">
          First panel — visible by default.
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="collapse multi-demo" id="demo2">
        <div class="card card-body">
          Second panel — initially hidden.
        </div>
      </div>
    </div>
  </div>
</div>

▶ Try it Yourself

▶ Example: Collapse Panel within a Card

HTML

<div class="card" style="max-width: 500px;">
  <div class="card-header bg-primary text-white">
    <h5 class="mb-0">Order Summary</h5>
  </div>
  <div class="card-body">
    <p class="card-text">Your order contains 3 items.</p>
    <p>
      <a class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" href="#orderDetails">
        View Details
      </a>
    </p>
    <div class="collapse" id="orderDetails">
      <div class="border rounded p-3 bg-light">
        <div class="d-flex justify-content-between mb-2">
          <span>Wireless Mouse</span><span class="text-muted">$29.99</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span>USB-C Hub</span><span class="text-muted">$39.99</span>
        </div>
        <div class="d-flex justify-content-between">
          <span>Mouse Pad</span><span class="text-muted">$12.99</span>
        </div>
        <hr>
        <div class="d-flex justify-content-between fw-bold">
          <span>Total</span><span>$82.97</span>
        </div>
      </div>
    </div>
  </div>
</div>

▶ Try it Yourself

(1) How Collapse/Accordion Works

flowchart TD
    A[Trigger<br/>data-bs-toggle=collapse] --> B[data-bs-target=#id]
    B --> C[Target Element<br/>class=collapse]
    C --> D{Initial State}
    D -->|No show| E[Hidden by Default]
    D -->|Has show| F[Expanded by Default]
    C --> G{Has data-bs-parent?}
    G -->|Yes| H[Linked Mode<br/>Only one open at a time]
    G -->|No| I[Independent Mode<br/>Toggle individually]
    H --> J[Accordion]
    I --> K[Regular Collapse]

Collapse Class	Effect	Description
`collapse`	Hidden by default	Not visible on page load
`collapse show`	Expanded by default	Visible on page load
`collapsing`	Transitioning	Added automatically during animation
`accordion-collapse`	Accordion-specific	Used within an accordion

data-* Attribute	Value	Purpose
`data-bs-toggle`	`collapse`	Declares a collapse trigger
`data-bs-target`	`#id` / `.class`	Specifies the controlled element
`data-bs-parent`	`#accordionId`	Linked constraint (accordion)
`href`	`#id`	Link-type trigger

Accordion Variation	Class	Characteristic	Scenario
Basic	`accordion`	Standard border	General use
Borderless	`accordion-flush`	No outer border/rounding	FAQ, sidebars
Always-open	Remove `data-bs-parent`	Multiple panels open simultaneously	Settings panels
Nested in Card	Place inside `card-body`	Compact layout	Order details

❓ Frequently Asked Questions

Q What's the difference between Accordion and Collapse?

A Collapse is the base component – it controls the expand/collapse of a single element. Accordion is a combined application of Collapse – multiple panels are linked via data-bs-parent, allowing only one to be expanded at a time.

Q The arrow icon doesn't rotate when clicking the Accordion title. Why?

A This is likely because Bootstrap JS wasn't loaded correctly. Make sure you've included bootstrap.bundle.min.js. Check the browser console for any JS errors.

Q How do I make the first panel of an accordion expanded by default without the auto-collapse behavior?

A Simply remove the data-bs-parent attribute. This way, each panel works independently and won't affect the others.

Q Can I put checkboxes or input fields inside an Accordion?

A Yes. You can place any HTML within accordion-body, including form controls. Be careful not to accidentally trigger the accordion's expand/collapse when clicking inputs. You can use event.stopPropagation() to prevent bubbling.

Q Does the Accordion support keyboard navigation?

A Yes. Bootstrap's accordion implements keyboard interaction: Tab switches focus between panels, Enter/Space expands the current panel, and pressing Enter/Space again on an expanded panel collapses it.

📖 Summary

Collapse: data-bs-toggle="collapse" + data-bs-target="#id" controls a single element
Accordion: accordion container + accordion-item + accordion-button + accordion-collapse
data-bs-parent enables linked behavior; remove it for independent panels
accordion-flush removes borders

📝 Assignment

⭐ Create an FAQ accordion: At least 5 common questions, the first one expanded by default, others collapsed, using the borderless accordion-flush style.
⭐⭐ Implement the answers to the homework using an Accordion – each question as a panel, click to reveal the answer.
⭐⭐⭐ Create a sidebar navigation accordion: Include Dashboard (no sub-items), Products (3 sub-items), Orders (2 sub-items), Settings (4 sub-items).

Previous Lesson: Alert Components · Next Lesson: Bootstrap Icons

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

404 Not Found

Accordion and Collapse Panels

1. Lesson Introduction

(1) Prerequisites

(2) 🎯 What You Will Learn

(3) Pain Point

(4) Solution

(5) Benefits

2. Single Collapse Panel

▶ Example: Basic Collapse Panel

(1) Collapse Key Attributes

3. Accordion

(1) Accordion Structure

(2) Key Mechanism

4. Accordion Variations

5. More Collapse Panel Examples

▶ Example: FAQ Accordion (Borderless)

▶ Example: Always-Open Mode (Independent Panels)

▶ Example: Independent Collapse Components

▶ Example: Collapse Panel within a Card

(1) How Collapse/Accordion Works

❓ Frequently Asked Questions

📖 Summary

📝 Assignment

🙏 帮我们做得更好