Bootstrap Collapse and Accordion

35 min

Bootstrap's collapse component provides a simple way to show and hide content with smooth transitions. Collapse is useful for creating expandable sections, FAQ lists, or any content that should be hidden by default and revealed on demand. The collapse uses CSS transitions for smooth animations and can be triggered via data attributes or JavaScript.

Collapse requires a target element (the collapsible content) and a trigger element (button or link). The trigger uses `data-bs-toggle="collapse"` and `data-bs-target` pointing to the collapsible element's ID. The collapsible element needs the `.collapse` class, and optionally `.show` to be visible initially. The `.collapse` class hides content, while `.collapsing` is applied during transitions.

Accordions are a special implementation of collapse that groups related collapsible content. In an accordion, only one item can be open at a time—opening a new item automatically closes the previously open item. This is achieved using the `data-bs-parent` attribute, which groups accordion items together. Accordions are perfect for FAQs, feature lists, or categorized content.

Accordion structure uses `.accordion` container with `.accordion-item` elements. Each item contains an `.accordion-header` with a button trigger and an `.accordion-collapse` section with the collapsible content. The first item typically has `.show` on its collapse element to display content initially.

Collapse and accordion components support various styling options. Accordion items can use `.accordion-flush` to remove borders and rounded corners, creating a seamless appearance. The components work seamlessly with other Bootstrap components, allowing you to include cards, lists, or forms within collapsible content.

Both collapse and accordion are fully accessible, supporting keyboard navigation (Enter/Space to toggle) and proper ARIA attributes. The components handle focus management and screen reader announcements, ensuring all users can interact with them effectively.

Key Concepts

Collapse shows/hides content with smooth transitions.
Collapse requires trigger (data-bs-toggle) and target (data-bs-target).
Accordions group collapsible items with single-open behavior.
Accordions use data-bs-parent to group related items.
Both components support keyboard navigation and accessibility.

Learning Objectives

Master

Creating collapsible content sections
Building accordions with grouped items
Triggering collapse via data attributes and JavaScript
Styling accordions with flush and other variants

Develop

Designing expandable content interfaces
Understanding accordion interaction patterns
Creating accessible collapsible content

Tips

Use .show class on collapse element to display content initially.
Accordion items need data-bs-parent="#accordionId" to group them.
Add .accordion-flush for borderless accordion styling.
Use .accordion-button:not(.collapsed) for custom active styling.

Common Pitfalls

Forgetting to include Bootstrap JavaScript, breaking collapse functionality.
Missing data-bs-target matching collapse element id.
Not using data-bs-parent in accordions, allowing multiple items open.
Not testing keyboard navigation, missing accessibility issues.

Summary

Collapse enables show/hide content with smooth transitions.
Accordions group collapsible items with single-open behavior.
Both components support data attributes and JavaScript control.
Collapse and accordion are accessible and keyboard-friendly.

Exercise

Create an accordion with multiple sections and a simple collapse element.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.
      </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">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes.
      </div>
    </div>
  </div>
</div>

<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">
    Some placeholder content for a collapsible element. This content is hidden by default but shown when the user activates the relevant trigger.
  </div>
</div>

Exercise Tips

Try accordion-flush: <div class="accordion accordion-flush"> for borderless style.
Add icons to accordion buttons: <i class="bi bi-chevron-down"></i>.
Use multiple accordions on same page with different parent IDs.
Customize collapse animation duration with CSS: --bs-transition-collapse.

Bootstrap Collapse and Accordion