Collapse
Collapse shows and hides content with a short animation. Point a button or link at the target with data-bs-toggle="collapse", keep aria-expanded and aria-controls in sync, and use it for read-more text, filter panels, sub-menus and expandable rows.
1Button toggle
A button with data-bs-toggle="collapse" shows and hides the target.
The new price alerts makes time back in your day with friendly support. This powerful project connects complex tasks into simple steps on any device.
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-908" aria-expanded="false" aria-controls="collapse-908">Toggle details</button>
<div class="collapse" id="collapse-908">
<div class="card card-body mt-2">
The new price alerts makes time back in your day with friendly support. This powerful project connects complex tasks into simple steps on any device.
</div>
</div>2Link toggle
A link with href="#id" and role="button" works the same way.
What does this mean?
A practical release makes results you can measure without the usual hassle.
<a class="link-primary" data-bs-toggle="collapse" href="#collapse-909" role="button" aria-expanded="false" aria-controls="collapse-909"><i class="bi bi-info-circle" aria-hidden="true"></i> What does this mean?</a>
<div class="collapse" id="collapse-909">
<p class="small text-body-secondary mt-2 mb-0">A practical release makes results you can measure without the usual hassle.</p>
</div>3Horizontal collapse
collapse-horizontal animates the width; the content needs a fixed width.
Our property search guides data easy to understand on any device.
<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-910" aria-expanded="false" aria-controls="collapse-910">Toggle width</button>
<div style="min-height: 110px;" class="mt-2">
<div class="collapse collapse-horizontal" id="collapse-910">
<div class="card card-body" style="width: 260px;">
Our property search guides data easy to understand on any device.
</div>
</div>
</div>4Multiple targets
One button can toggle several elements by targeting a shared class.
A secure goal keeps the whole team on the same page from the very first day.
Our home valuation shows every detail in view at a fair price.
<div class="d-flex flex-wrap gap-2 mb-2">
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#multi-911" aria-expanded="false" aria-controls="multi-911">Toggle first</button>
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#multi-912" aria-expanded="false" aria-controls="multi-912">Toggle second</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-group-913" aria-expanded="false" aria-controls="multi-911 multi-912">Toggle both</button>
</div>
<div class="row g-2">
<div class="col-sm-6">
<div class="collapse multi-group-913" id="multi-911">
<div class="card card-body">
A secure goal keeps the whole team on the same page from the very first day.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="collapse multi-group-913" id="multi-912">
<div class="card card-body">
Our home valuation shows every detail in view at a fair price.
</div>
</div>
</div>
</div>5Read more
Show the first part of a text and reveal the rest on demand.
Our mortgage advice gives projects moving forward all year round. Our home valuation brings time back in your day without the usual hassle.
A modern routine guides complex tasks into simple steps with friendly support. The new 3d tours gives the whole team on the same page with friendly support. The new neighbourhood guides brings new ideas to life all year round.
<p class="mb-1">Our mortgage advice gives projects moving forward all year round. Our home valuation brings time back in your day without the usual hassle.</p>
<div class="collapse" id="more-914">
<p class="mb-1">A modern routine guides complex tasks into simple steps with friendly support. The new 3d tours gives the whole team on the same page with friendly support. The new neighbourhood guides brings new ideas to life all year round.</p>
</div>
<button class="btn btn-link px-0 ca-more" type="button" data-bs-toggle="collapse" data-bs-target="#more-914" aria-expanded="false" aria-controls="more-914"><span class="ca-more-show">Read more</span><span class="ca-more-hide">Show less</span></button>6Filter panel
A filter button above a table reveals extra search fields.
<div class="d-flex gap-2">
<input type="search" class="form-control" placeholder="Search orders" aria-label="Search orders" style="max-width: 280px;">
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#filters-915" aria-expanded="false" aria-controls="filters-915"><i class="bi bi-sliders" aria-hidden="true"></i> Filters</button>
</div>
<div class="collapse" id="filters-915">
<div class="border rounded p-3 mt-2 row g-2">
<div class="col-sm-6">
<label class="form-label small" for="filter-q-916">Customer</label>
<input class="form-control form-control-sm" id="filter-q-916" type="text" placeholder="Ravi Kowalski">
</div>
<div class="col-sm-6">
<label class="form-label small" for="filter-status-917">Status</label>
<select class="form-select form-select-sm" id="filter-status-917">
<option>Any</option>
<option>Paid</option>
<option>Pending</option>
<option>Refunded</option>
</select>
</div>
<div class="col-12 text-end">
<button type="button" class="btn btn-primary btn-sm">Apply</button>
</div>
</div>
</div>7Sidebar sub-menus
Nested navigation where each section expands to show its links.
<nav class="border rounded p-2" style="max-width: 260px;" aria-label="Admin menu">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link link-body-emphasis" href="#"><i class="bi bi-house" aria-hidden="true"></i> Home</a></li>
<li class="nav-item"><a class="nav-link link-body-emphasis d-flex justify-content-between" data-bs-toggle="collapse" href="#menu-918" role="button" aria-expanded="true" aria-controls="menu-918"><span><i class="bi bi-bag" aria-hidden="true"></i> Sales</span><i class="bi bi-chevron-down" aria-hidden="true"></i></a><div class="collapse show" id="menu-918"><ul class="nav flex-column ms-4 small"><li class="nav-item"><a class="nav-link py-1" href="#">Orders</a></li><li class="nav-item"><a class="nav-link py-1" href="#">Invoices</a></li></ul></div></li>
<li class="nav-item"><a class="nav-link link-body-emphasis d-flex justify-content-between" data-bs-toggle="collapse" href="#menu-919" role="button" aria-expanded="false" aria-controls="menu-919"><span><i class="bi bi-bar-chart" aria-hidden="true"></i> Reports</span><i class="bi bi-chevron-down" aria-hidden="true"></i></a><div class="collapse" id="menu-919"><ul class="nav flex-column ms-4 small"><li class="nav-item"><a class="nav-link py-1" href="#">Weekly</a></li><li class="nav-item"><a class="nav-link py-1" href="#">Monthly</a></li></ul></div></li>
</ul>
</nav>8Expandable table rows
A detail row under each table row opens with a small toggle.
| Invoice | Amount | Details |
|---|---|---|
| #INV-2235 | $511.24 | |
Billed to Kai Okafor, Austin. Due Oct 30, 2026. | ||
| #INV-2713 | $534.07 | |
Billed to Samir Ortega, Cape Town. Due Dec 30, 2026. | ||
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead>
<tr>
<th scope="col">Invoice</th>
<th scope="col">Amount</th>
<th scope="col"><span class="visually-hidden">Details</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>#INV-2235</td>
<td>$511.24</td>
<td class="text-end"><button class="btn btn-sm btn-light border" type="button" data-bs-toggle="collapse" data-bs-target="#row-detail-920" aria-expanded="false" aria-controls="row-detail-920"><i class="bi bi-chevron-expand" aria-hidden="true"></i><span class="visually-hidden">Show details</span></button></td>
</tr>
<tr>
<td colspan="3" class="p-0 border-0"><div class="collapse" id="row-detail-920"><div class="p-3 bg-body-tertiary small">Billed to Kai Okafor, Austin. Due Oct 30, 2026.</div></div></td>
</tr>
<tr>
<td>#INV-2713</td>
<td>$534.07</td>
<td class="text-end"><button class="btn btn-sm btn-light border" type="button" data-bs-toggle="collapse" data-bs-target="#row-detail-921" aria-expanded="false" aria-controls="row-detail-921"><i class="bi bi-chevron-expand" aria-hidden="true"></i><span class="visually-hidden">Show details</span></button></td>
</tr>
<tr>
<td colspan="3" class="p-0 border-0"><div class="collapse" id="row-detail-921"><div class="p-3 bg-body-tertiary small">Billed to Samir Ortega, Cape Town. Due Dec 30, 2026.</div></div></td>
</tr>
</tbody>
</table>
</div>9Advanced form options
Hide rarely used settings behind an "Advanced" toggle.
<div style="max-width: 420px;">
<a class="small" data-bs-toggle="collapse" href="#advanced-922" role="button" aria-expanded="false" aria-controls="advanced-922"><i class="bi bi-gear" aria-hidden="true"></i> Advanced options</a>
<div class="collapse" id="advanced-922">
<div class="mt-2">
<label class="form-label small" for="adv-slug-923">URL slug</label>
<input class="form-control form-control-sm mb-2" id="adv-slug-923" type="text" value="how-we-rebuilt-our-journey">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="adv-index-924">
<label class="form-check-label small" for="adv-index-924">Hide from search engines</label>
</div>
</div>
</div>
</div>10Minimisable card
A header button collapses the card body, as in dashboard widgets.
Traffic
22.8k
14% this week
<div class="card" style="max-width: 26rem;">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="fw-semibold"><i class="bi bi-graph-up" aria-hidden="true"></i> Traffic</span>
<button class="btn btn-sm btn-link link-secondary p-0" type="button" data-bs-toggle="collapse" data-bs-target="#widget-925" aria-expanded="true" aria-controls="widget-925"><i class="bi bi-dash-square" aria-hidden="true"></i><span class="visually-hidden">Minimise</span></button>
</div>
<div class="collapse show" id="widget-925">
<div class="card-body">
<div class="fs-3 fw-bold">
22.8k
</div>
<div class="small text-success">
<i class="bi bi-arrow-up" aria-hidden="true"></i> 14% this week
</div>
</div>
</div>
</div>11Open by default
Add .show to start expanded; the button's aria-expanded is then true.
Our mortgage advice makes time back in your day from the very first day. A honest idea brings you focused on what matters from the very first day.
<button class="btn btn-outline-dark btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-926" aria-expanded="true" aria-controls="collapse-926">Hide summary</button>
<div class="collapse show" id="collapse-926">
<div class="alert alert-secondary mt-2 mb-0">
Our mortgage advice makes time back in your day from the very first day. A honest idea brings you focused on what matters from the very first day.
</div>
</div>12Rotating chevron
A chevron that turns when the panel opens, driven by aria-expanded in CSS.
Our mortgage advice lets new ideas to life wherever you are.
<button class="btn btn-light border w-100 d-flex justify-content-between align-items-center ca-chev" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-927" aria-expanded="false" aria-controls="collapse-927" style="max-width: 420px;">Shipping & returns<i class="bi bi-chevron-down" aria-hidden="true"></i></button>
<div class="collapse" id="collapse-927" style="max-width: 420px;">
<div class="p-3 small">
Our mortgage advice lets new ideas to life wherever you are.
</div>
</div>13Comments thread
Keep a feed short and let readers open the replies.
This smart process brings every detail in view on any device.
View 2 replies
Owen Fischer A modern goal helps results you can measure without extra tools.
Zoe Nguyen A calm plan connects your work organised on any device.
<p class="mb-1">This smart process brings every detail in view on any device.</p>
<a class="small" data-bs-toggle="collapse" href="#comments-928" role="button" aria-expanded="false" aria-controls="comments-928"><i class="bi bi-chat" aria-hidden="true"></i> View 2 replies</a>
<div class="collapse" id="comments-928">
<div class="mt-2 ps-3 border-start">
<div class="d-flex gap-2 mb-2">
<img src="../assets/img/avatar-8.svg" alt="Owen Fischer" class="rounded-circle flex-shrink-0" width="32" height="32">
<div class="bg-body-tertiary rounded p-2 small">
<strong>Owen Fischer</strong> A modern goal helps results you can measure without extra tools.
</div>
</div>
<div class="d-flex gap-2 mb-2">
<img src="../assets/img/avatar-6.svg" alt="Zoe Nguyen" class="rounded-circle flex-shrink-0" width="32" height="32">
<div class="bg-body-tertiary rounded p-2 small">
<strong>Zoe Nguyen</strong> A calm plan connects your work organised on any device.
</div>
</div>
</div>
</div>14Release notes
A compact version line that expands into the full change list.
Version 6.4 Stable
Dec 3, 2025
- Fast paperwork
- Fast paperwork
- Faster loading on slow connections
<div class="border rounded p-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="fw-semibold">Version 6.4</span> <span class="badge text-bg-success">Stable</span>
<div class="small text-body-secondary">
Dec 3, 2025
</div>
</div>
<button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#notes-929" aria-expanded="false" aria-controls="notes-929">What's new</button>
</div>
<div class="collapse" id="notes-929">
<ul class="small mt-3 mb-0">
<li>Fast paperwork</li>
<li>Fast paperwork</li>
<li>Faster loading on slow connections</li>
</ul>
</div>
</div>15Specification list
A definition list of technical details hidden behind a full-width toggle.
- Weight
- 4.3 kg
- Dimensions
- 54 x 24 x 15 cm
- Warranty
- 1 years
<button class="btn btn-outline-secondary w-100" type="button" data-bs-toggle="collapse" data-bs-target="#specs-930" aria-expanded="false" aria-controls="specs-930"><i class="bi bi-list-columns-reverse" aria-hidden="true"></i> Full specifications</button>
<div class="collapse" id="specs-930">
<dl class="row small border rounded p-3 mt-2 mb-0">
<dt class="col-sm-4">Weight</dt>
<dd class="col-sm-8">4.3 kg</dd>
<dt class="col-sm-4">Dimensions</dt>
<dd class="col-sm-8">54 x 24 x 15 cm</dd>
<dt class="col-sm-4">Warranty</dt>
<dd class="col-sm-8 mb-0">1 years</dd>
</dl>
</div>16Expandable search bar
A search icon in a header opens a full-width search field below it.
Brand name 3
<div class="border rounded">
<div class="d-flex align-items-center justify-content-between p-2">
<span class="fw-bold">Brand name 3</span>
<button class="btn btn-light" type="button" data-bs-toggle="collapse" data-bs-target="#msearch-931" aria-expanded="false" aria-controls="msearch-931"><i class="bi bi-search" aria-hidden="true"></i><span class="visually-hidden">Search</span></button>
</div>
<div class="collapse" id="msearch-931">
<div class="p-2 border-top">
<label class="visually-hidden" for="msearch-input-932">Search</label>
<input type="search" class="form-control" id="msearch-input-932" placeholder="Search Brand name 3">
</div>
</div>
</div>17Onboarding checklist
Each checklist step expands to explain what to do.
The new verified listings gives complex tasks into simple steps without extra tools.
Our mortgage advice keeps time back in your day on any device.
This calm routine keeps you focused on what matters wherever you are.
<div class="list-group" style="max-width: 480px;">
<div class="list-group-item">
<button class="btn btn-link p-0 text-decoration-none link-body-emphasis d-flex align-items-center gap-2 w-100 text-start" type="button" data-bs-toggle="collapse" data-bs-target="#step-933" aria-expanded="false" aria-controls="step-933"><span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Verify your email</button>
<div class="collapse" id="step-933">
<p class="small text-body-secondary mt-2 mb-1 ms-4">The new verified listings gives complex tasks into simple steps without extra tools.</p>
</div>
</div>
<div class="list-group-item">
<button class="btn btn-link p-0 text-decoration-none link-body-emphasis d-flex align-items-center gap-2 w-100 text-start" type="button" data-bs-toggle="collapse" data-bs-target="#step-934" aria-expanded="false" aria-controls="step-934"><span class="text-body-tertiary"><i class="bi bi-circle" aria-hidden="true"></i></span>Add a payment method</button>
<div class="collapse" id="step-934">
<p class="small text-body-secondary mt-2 mb-1 ms-4">Our mortgage advice keeps time back in your day on any device.</p>
</div>
</div>
<div class="list-group-item">
<button class="btn btn-link p-0 text-decoration-none link-body-emphasis d-flex align-items-center gap-2 w-100 text-start" type="button" data-bs-toggle="collapse" data-bs-target="#step-935" aria-expanded="false" aria-controls="step-935"><span class="text-body-tertiary"><i class="bi bi-circle" aria-hidden="true"></i></span>Invite a teammate</button>
<div class="collapse" id="step-935">
<p class="small text-body-secondary mt-2 mb-1 ms-4">This calm routine keeps you focused on what matters wherever you are.</p>
</div>
</div>
</div>18Swap two panels
Two collapses sharing a class swap places: one hides while the other shows.
Read-only view: Our legal support makes projects moving forward without extra tools.
<div class="pane-group-938">
<div class="collapse show pane-group-938-p" id="pane-936">
<div class="card card-body">
<p><i class="bi bi-eye" aria-hidden="true"></i> Read-only view: Our legal support makes projects moving forward without extra tools.</p>
<button class="btn btn-primary btn-sm align-self-start" type="button" data-bs-toggle="collapse" data-bs-target=".pane-group-938-p" aria-expanded="true" aria-controls="pane-936 pane-937"><i class="bi bi-pencil" aria-hidden="true"></i> Edit</button>
</div>
</div>
<div class="collapse pane-group-938-p" id="pane-937">
<div class="card card-body">
<label class="form-label" for="pane-937-text">Description</label>
<textarea class="form-control mb-2" id="pane-937-text" rows="2">A friendly journey brings customers coming back with friendly support.</textarea>
<button class="btn btn-success btn-sm align-self-start" type="button" data-bs-toggle="collapse" data-bs-target=".pane-group-938-p" aria-expanded="false" aria-controls="pane-936 pane-937"><i class="bi bi-check-lg" aria-hidden="true"></i> Done</button>
</div>
</div>
</div>19Grouped notifications
Older notifications collapse into a single "show earlier" row.
- The new 3d tours shows complex tasks into simple steps from the very first day.
- A calm launch makes time back in your day without extra tools.
- The new neighbourhood guides lets data easy to understand all year round.
<ul class="list-group" style="max-width: 420px;">
<li class="list-group-item small"><i class="bi bi-bell" aria-hidden="true"></i> The new 3d tours shows complex tasks into simple steps from the very first day.</li>
<li class="list-group-item p-0"><div class="collapse" id="group-939"><ul class="list-group list-group-flush"><li class="list-group-item small text-body-secondary">A calm launch makes time back in your day without extra tools.</li><li class="list-group-item small text-body-secondary">The new neighbourhood guides lets data easy to understand all year round.</li></ul></div><button class="btn btn-link btn-sm w-100" type="button" data-bs-toggle="collapse" data-bs-target="#group-939" aria-expanded="false" aria-controls="group-939">Show 4 earlier</button></li>
</ul>20Nested collapse
A collapse inside another for drilling into details step by step.
This reliable project makes results you can measure on any device.
- Design: $1,720.29
- Development: $8,730.19
- Marketing: $3,521.32
<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#outer-940" aria-expanded="false" aria-controls="outer-940">Project details</button>
<div class="collapse" id="outer-940">
<div class="card card-body mt-2">
<p>This reliable project makes results you can measure on any device.</p>
<button class="btn btn-sm btn-outline-secondary align-self-start" type="button" data-bs-toggle="collapse" data-bs-target="#inner-941" aria-expanded="false" aria-controls="inner-941">Budget breakdown</button>
<div class="collapse" id="inner-941">
<ul class="small mt-2 mb-0">
<li>Design: $1,720.29</li>
<li>Development: $8,730.19</li>
<li>Marketing: $3,521.32</li>
</ul>
</div>
</div>
</div>