Collapse
Collapse shows and hides content with a short animation. Point a button or link at the target with data-ui-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-ui-toggle="collapse" shows and hides the target.
A flexible goal shows you focused on what matters with friendly support. The new recorded sessions makes your work organised on any device.
<button class="btn btn-primary" type="button" data-ui-toggle="collapse" data-ui-target="#collapse-908" aria-expanded="false" aria-controls="collapse-908">Toggle details</button>
<div class="ui-collapse" id="collapse-908">
<div class="card card-body mt-2">
A flexible goal shows you focused on what matters with friendly support. The new recorded sessions makes your work organised on any device.
</div>
</div>2Link toggle
A link with href="#id" and role="button" works the same way.
What does this mean?
The new mobile agenda makes time back in your day without the usual hassle.
<a class="link-primary" data-ui-toggle="collapse" href="#collapse-909" role="button" aria-expanded="false" aria-controls="collapse-909"><i class="bi bi-info-circle-fill" aria-hidden="true"></i> What does this mean?</a>
<div class="ui-collapse" id="collapse-909">
<p class="small text-muted mt-2 mb-0">The new mobile agenda makes time back in your day without the usual hassle.</p>
</div>3Horizontal collapse
collapse-horizontal animates the width; the content needs a fixed width.
Our ticketing makes customers coming back without extra tools.
<button class="btn btn-outline-primary" type="button" data-ui-toggle="collapse" data-ui-target="#collapse-910" aria-expanded="false" aria-controls="collapse-910">Toggle width</button>
<div style="min-height: 110px;" class="mt-2">
<div class="ui-collapse collapse-horizontal" id="collapse-910">
<div class="card card-body" style="width: 260px;">
Our ticketing makes customers coming back without extra tools.
</div>
</div>
</div>4Multiple targets
One button can toggle several elements by targeting a shared class.
The new hands-on workshops connects your work organised from the very first day.
This honest process connects results you can measure for teams of every size.
<div class="flex flex-wrap gap-2 mb-2">
<button class="btn btn-outline-secondary" type="button" data-ui-toggle="collapse" data-ui-target="#multi-911" aria-expanded="false" aria-controls="multi-911">Toggle first</button>
<button class="btn btn-outline-secondary" type="button" data-ui-toggle="collapse" data-ui-target="#multi-912" aria-expanded="false" aria-controls="multi-912">Toggle second</button>
<button class="btn btn-primary" type="button" data-ui-toggle="collapse" data-ui-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="ui-collapse multi-group-913" id="multi-911">
<div class="card card-body">
The new hands-on workshops connects your work organised from the very first day.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ui-collapse multi-group-913" id="multi-912">
<div class="card card-body">
This honest process connects results you can measure for teams of every size.
</div>
</div>
</div>
</div>5Read more
Show the first part of a text and reveal the rest on demand.
The new certificates lets customers coming back all year round. Our sponsorship makes the whole team on the same page wherever you are.
Our speaker management connects projects moving forward wherever you are. Our ticketing turns data easy to understand in just a few clicks. A clear update lets time back in your day without the usual hassle.
<p class="mb-1">The new certificates lets customers coming back all year round. Our sponsorship makes the whole team on the same page wherever you are.</p>
<div class="ui-collapse" id="more-914">
<p class="mb-1">Our speaker management connects projects moving forward wherever you are. Our ticketing turns data easy to understand in just a few clicks. A clear update lets time back in your day without the usual hassle.</p>
</div>
<button class="btn btn-link px-0 ca-more" type="button" data-ui-toggle="collapse" data-ui-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="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-ui-toggle="collapse" data-ui-target="#filters-915" aria-expanded="false" aria-controls="filters-915"><i class="bi bi-sliders" aria-hidden="true"></i> Filters</button>
</div>
<div class="ui-collapse" id="filters-915">
<div class="border rounded-md p-4 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="Liam Brennan">
</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-md p-2" style="max-width: 260px;" aria-label="Admin menu">
<ul class="nav flex-col">
<li class="nav-item"><a class="nav-link link-body-emphasis" href="#"><i class="bi bi-house-fill" aria-hidden="true"></i> Home</a></li>
<li class="nav-item"><a class="nav-link link-body-emphasis flex justify-between" data-ui-toggle="collapse" href="#menu-918" role="button" aria-expanded="true" aria-controls="menu-918"><span><i class="bi bi-bag-fill" aria-hidden="true"></i> Sales</span><i class="bi bi-chevron-down" aria-hidden="true"></i></a><div class="ui-collapse show" id="menu-918"><ul class="nav flex-col ms-6 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 flex justify-between" data-ui-toggle="collapse" href="#menu-919" role="button" aria-expanded="false" aria-controls="menu-919"><span><i class="bi bi-bar-chart-fill" aria-hidden="true"></i> Reports</span><i class="bi bi-chevron-down" aria-hidden="true"></i></a><div class="ui-collapse" id="menu-919"><ul class="nav flex-col ms-6 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 |
|---|---|---|
| #PO-4469 | $300.82 | |
Billed to Omar Ibrahim, Kyoto. Due Jan 23, 2027. | ||
| #PO-5567 | $161.69 | |
Billed to Finn Larsen, Barcelona. Due Nov 3, 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="sr-only">Details</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>#PO-4469</td>
<td>$300.82</td>
<td class="text-end"><button class="btn btn-sm btn-light border" type="button" data-ui-toggle="collapse" data-ui-target="#row-detail-920" aria-expanded="false" aria-controls="row-detail-920"><i class="bi bi-chevron-expand" aria-hidden="true"></i><span class="sr-only">Show details</span></button></td>
</tr>
<tr>
<td colspan="3" class="p-0 border-0"><div class="ui-collapse" id="row-detail-920"><div class="p-4 bg-surface-3 small">Billed to Omar Ibrahim, Kyoto. Due Jan 23, 2027.</div></div></td>
</tr>
<tr>
<td>#PO-5567</td>
<td>$161.69</td>
<td class="text-end"><button class="btn btn-sm btn-light border" type="button" data-ui-toggle="collapse" data-ui-target="#row-detail-921" aria-expanded="false" aria-controls="row-detail-921"><i class="bi bi-chevron-expand" aria-hidden="true"></i><span class="sr-only">Show details</span></button></td>
</tr>
<tr>
<td colspan="3" class="p-0 border-0"><div class="ui-collapse" id="row-detail-921"><div class="p-4 bg-surface-3 small">Billed to Finn Larsen, Barcelona. Due Nov 3, 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-ui-toggle="collapse" href="#advanced-922" role="button" aria-expanded="false" aria-controls="advanced-922"><i class="bi bi-gear-fill" aria-hidden="true"></i> Advanced options</a>
<div class="ui-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="the-fast-plan-checklist">
<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
78.7k
15% this week
<div class="card" style="max-width: 26rem;">
<div class="card-header flex justify-between items-center">
<span class="font-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-ui-toggle="collapse" data-ui-target="#widget-925" aria-expanded="true" aria-controls="widget-925"><i class="bi bi-dash-square-fill" aria-hidden="true"></i><span class="sr-only">Minimise</span></button>
</div>
<div class="ui-collapse show" id="widget-925">
<div class="card-body">
<div class="text-2xl font-bold">
78.7k
</div>
<div class="small text-success">
<i class="bi bi-arrow-up" aria-hidden="true"></i> 15% this week
</div>
</div>
</div>
</div>11Open by default
Add .show to start expanded; the button's aria-expanded is then true.
This honest story brings new ideas to life for teams of every size. This flexible experience keeps the whole team on the same page wherever you are.
<button class="btn btn-outline-dark btn-sm" type="button" data-ui-toggle="collapse" data-ui-target="#collapse-926" aria-expanded="true" aria-controls="collapse-926">Hide summary</button>
<div class="ui-collapse show" id="collapse-926">
<div class="alert alert-secondary mt-2 mb-0">
This honest story brings new ideas to life for teams of every size. This flexible experience keeps the whole team on the same page wherever you are.
</div>
</div>12Rotating chevron
A chevron that turns when the panel opens, driven by aria-expanded in CSS.
Our sponsorship guides you focused on what matters wherever you are.
<button class="btn btn-light border w-full flex justify-between items-center ca-chev" type="button" data-ui-toggle="collapse" data-ui-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="ui-collapse" id="collapse-927" style="max-width: 420px;">
<div class="p-4 small">
Our sponsorship guides you focused on what matters wherever you are.
</div>
</div>13Comments thread
Keep a feed short and let readers open the replies.
Our sponsorship lets the whole team on the same page for teams of every size.
View 2 replies
Kai Morgan The new recorded sessions guides complex tasks into simple steps with friendly support.
Omar Patel Our live streaming makes complex tasks into simple steps all year round.
<p class="mb-1">Our sponsorship lets the whole team on the same page for teams of every size.</p>
<a class="small" data-ui-toggle="collapse" href="#comments-928" role="button" aria-expanded="false" aria-controls="comments-928"><i class="bi bi-chat-fill" aria-hidden="true"></i> View 2 replies</a>
<div class="ui-collapse" id="comments-928">
<div class="mt-2 ps-4 border-s">
<div class="flex gap-2 mb-2">
<img src="../assets/img/avatar-5.svg" alt="Kai Morgan" class="rounded-full shrink-0" width="32" height="32">
<div class="bg-surface-3 rounded-md p-2 small">
<strong>Kai Morgan</strong> The new recorded sessions guides complex tasks into simple steps with friendly support.
</div>
</div>
<div class="flex gap-2 mb-2">
<img src="../assets/img/avatar-7.svg" alt="Omar Patel" class="rounded-full shrink-0" width="32" height="32">
<div class="bg-surface-3 rounded-md p-2 small">
<strong>Omar Patel</strong> Our live streaming makes complex tasks into simple steps all year round.
</div>
</div>
</div>
</div>14Release notes
A compact version line that expands into the full change list.
Version 5.3 Stable
Sep 22, 2025
- Certificates
- Hands-on workshops
- Faster loading on slow connections
<div class="border rounded-md p-4">
<div class="flex justify-between items-center">
<div>
<span class="font-semibold">Version 5.3</span> <span class="badge text-bg-success">Stable</span>
<div class="small text-muted">
Sep 22, 2025
</div>
</div>
<button class="btn btn-outline-primary btn-sm" type="button" data-ui-toggle="collapse" data-ui-target="#notes-929" aria-expanded="false" aria-controls="notes-929">What's new</button>
</div>
<div class="ui-collapse" id="notes-929">
<ul class="small mt-4 mb-0">
<li>Certificates</li>
<li>Hands-on workshops</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
- 3.3 kg
- Dimensions
- 52 x 22 x 11 cm
- Warranty
- 2 years
<button class="btn btn-outline-secondary w-full" type="button" data-ui-toggle="collapse" data-ui-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="ui-collapse" id="specs-930">
<dl class="row small border rounded-md p-4 mt-2 mb-0">
<dt class="col-sm-4">Weight</dt>
<dd class="col-sm-8">3.3 kg</dd>
<dt class="col-sm-4">Dimensions</dt>
<dd class="col-sm-8">52 x 22 x 11 cm</dd>
<dt class="col-sm-4">Warranty</dt>
<dd class="col-sm-8 mb-0">2 years</dd>
</dl>
</div>16Expandable search bar
A search icon in a header opens a full-width search field below it.
Brand name 20
<div class="border rounded-md">
<div class="flex items-center justify-between p-2">
<span class="font-bold">Brand name 20</span>
<button class="btn btn-light" type="button" data-ui-toggle="collapse" data-ui-target="#msearch-931" aria-expanded="false" aria-controls="msearch-931"><i class="bi bi-search" aria-hidden="true"></i><span class="sr-only">Search</span></button>
</div>
<div class="ui-collapse" id="msearch-931">
<div class="p-2 border-t">
<label class="sr-only" for="msearch-input-932">Search</label>
<input type="search" class="form-control" id="msearch-input-932" placeholder="Search Brand name 20">
</div>
</div>
</div>17Onboarding checklist
Each checklist step expands to explain what to do.
The new recorded sessions guides customers coming back with friendly support.
Our networking app guides results you can measure with friendly support.
Our networking app makes your work organised on any device.
<div class="list-group" style="max-width: 480px;">
<div class="list-group-item">
<button class="btn btn-link p-0 no-underline link-body-emphasis flex items-center gap-2 w-full text-start" type="button" data-ui-toggle="collapse" data-ui-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="ui-collapse" id="step-933">
<p class="small text-muted mt-2 mb-1 ms-6">The new recorded sessions guides customers coming back with friendly support.</p>
</div>
</div>
<div class="list-group-item">
<button class="btn btn-link p-0 no-underline link-body-emphasis flex items-center gap-2 w-full text-start" type="button" data-ui-toggle="collapse" data-ui-target="#step-934" aria-expanded="false" aria-controls="step-934"><span class="text-muted/70"><i class="bi bi-circle-fill" aria-hidden="true"></i></span>Add a payment method</button>
<div class="ui-collapse" id="step-934">
<p class="small text-muted mt-2 mb-1 ms-6">Our networking app guides results you can measure with friendly support.</p>
</div>
</div>
<div class="list-group-item">
<button class="btn btn-link p-0 no-underline link-body-emphasis flex items-center gap-2 w-full text-start" type="button" data-ui-toggle="collapse" data-ui-target="#step-935" aria-expanded="false" aria-controls="step-935"><span class="text-muted/70"><i class="bi bi-circle-fill" aria-hidden="true"></i></span>Invite a teammate</button>
<div class="ui-collapse" id="step-935">
<p class="small text-muted mt-2 mb-1 ms-6">Our networking app makes your work organised on any device.</p>
</div>
</div>
</div>18Swap two panels
Two collapses sharing a class swap places: one hides while the other shows.
Read-only view: Our ticketing helps data easy to understand on any device.
<div class="pane-group-938">
<div class="ui-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 ticketing helps data easy to understand on any device.</p>
<button class="btn btn-primary btn-sm self-start" type="button" data-ui-toggle="collapse" data-ui-target=".pane-group-938-p" aria-expanded="true" aria-controls="pane-936 pane-937"><i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit</button>
</div>
</div>
<div class="ui-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">This bright update turns you focused on what matters on any device.</textarea>
<button class="btn btn-success btn-sm self-start" type="button" data-ui-toggle="collapse" data-ui-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 certificates guides every detail in view without extra tools.
- A powerful plan turns the whole team on the same page without extra tools.
- This powerful plan shows decisions quicker and clearer at a fair price.
<ul class="list-group" style="max-width: 420px;">
<li class="list-group-item small"><i class="bi bi-bell-fill" aria-hidden="true"></i> The new certificates guides every detail in view without extra tools.</li>
<li class="list-group-item p-0"><div class="ui-collapse" id="group-939"><ul class="list-group list-group-flush"><li class="list-group-item small text-muted">A powerful plan turns the whole team on the same page without extra tools.</li><li class="list-group-item small text-muted">This powerful plan shows decisions quicker and clearer at a fair price.</li></ul></div><button class="btn btn-link btn-sm w-full" type="button" data-ui-toggle="collapse" data-ui-target="#group-939" aria-expanded="false" aria-controls="group-939">Show 2 earlier</button></li>
</ul>20Nested collapse
A collapse inside another for drilling into details step by step.
Our live streaming shows data easy to understand without the usual hassle.
- Design: $4,673.91
- Development: $6,197.69
- Marketing: $1,211.99
<button class="btn btn-outline-primary" type="button" data-ui-toggle="collapse" data-ui-target="#outer-940" aria-expanded="false" aria-controls="outer-940">Project details</button>
<div class="ui-collapse" id="outer-940">
<div class="card card-body mt-2">
<p>Our live streaming shows data easy to understand without the usual hassle.</p>
<button class="btn btn-sm btn-outline-secondary self-start" type="button" data-ui-toggle="collapse" data-ui-target="#inner-941" aria-expanded="false" aria-controls="inner-941">Budget breakdown</button>
<div class="ui-collapse" id="inner-941">
<ul class="small mt-2 mb-0">
<li>Design: $4,673.91</li>
<li>Development: $6,197.69</li>
<li>Marketing: $1,211.99</li>
</ul>
</div>
</div>
</div>