Bootstrap · Chapter 21 of 43

Bootstrap Collapse

The collapse component lets you show or hide content with a smooth sliding animation, commonly used for FAQs, expandable sections, or sidebar menus. It works by toggling a class on a target element.

A trigger element (button or link) uses data-bs-toggle="collapse" and data-bs-target to point at the element it should show or hide.

Syntax

<button data-bs-toggle="collapse" data-bs-target="#demo">Toggle</button>
<div class="collapse" id="demo">Content</div>

Basic collapse

Add data-bs-toggle="collapse" and data-bs-target="#id" to a button, and give the target element class="collapse" and matching id. Clicking the button toggles the .show class.

Accordions

Bootstrap's accordion component builds on collapse to create expandable sections where opening one item can automatically close the others, useful for FAQ pages.

Example 1 (html)

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#details">
  Show Details
</button>
<div class="collapse" id="details">
  <div class="card card-body">
    Here are some extra details that were hidden.
  </div>
</div>

Output

A button that, when clicked, slides open a card with extra text

Clicking the button toggles the collapse class on the #details div, sliding it open or closed.

Example 2 (html)

<div class="accordion" id="faq">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#q1">
        What is Bootstrap?
      </button>
    </h2>
    <div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faq">
      <div class="accordion-body">A CSS and JS framework for building websites.</div>
    </div>
  </div>
</div>

Output

An FAQ-style accordion item that is expanded by default, showing the answer text

data-bs-parent="#faq" ensures that opening this item closes any other open item in the same accordion.

Key points

data-bs-toggle="collapse" and data-bs-target link a trigger to a collapsible element.
The .collapse class hides content; .show reveals it with animation.
Accordions build on collapse to create expand/collapse FAQ sections.
data-bs-parent makes only one accordion item open at a time.

💡 Note: Always make sure the id on the target element exactly matches the data-bs-target selector.

Bootstrap Collapse

Basic collapse

Accordions

Key points

📝 Quick Quiz