Collapse and accordion
Collapse hides a block and smoothly reveals it when a button is clicked. It tucks away details not everyone needs: advanced filters, notes. An accordion is a group of collapsible blocks where only one is open; on the landing page it makes the FAQ section.
A collapsible block
The block gets the collapse class and an id. The button points to it with data-bs-toggle="collapse" and data-bs-target:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse"
data-bs-target="#filters" aria-expanded="false" aria-controls="filters">
Advanced filters
</button>
<div class="collapse mt-2" id="filters">
<div class="card card-body">
Filters by date, assignee and tags go here.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>At first only the button is visible. A click smoothly opens a card with text, another click closes it. Bootstrap toggles the aria-expanded attribute itself, so a screen reader knows the state.
The show class next to collapse makes the block open from the start. One button can control several blocks at once: put a shared class in data-bs-target, for example .details.
Accordion
An accordion is built from ready classes: an accordion wrapper with an id, accordion-item items, each with a header containing an accordion-button and a collapsible accordion-collapse block. The data-bs-parent attribute links the blocks: when one opens, the others close.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="accordion" id="faq">
<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">
Is there a free plan?
</button>
</h2>
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faq">
<div class="accordion-body">Yes, for teams of up to three people — forever.</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" aria-expanded="false" aria-controls="faq2">
Can I cancel my subscription?
</button>
</h2>
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faq">
<div class="accordion-body">Yes, at any time in your account settings.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>The first answer is open, the second collapsed. Open the second question and the first closes by itself. The arrow on the right of the header turns depending on the state.
Accordion settings
| What | How |
|---|---|
| Open by default | show on the block and no collapsed on the button |
| Several can be open | Remove data-bs-parent from the blocks |
| No borders or background | accordion-flush on the wrapper |
Common mistake
Leaving the button of a collapsed item without the collapsed class. Bootstrap does not compute the button's look on load: the arrow points up and the header is highlighted like an open item. Every button of a closed item needs collapsed and aria-expanded="false".