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 secure story gives new ideas to life on any device. A friendly routine connects time back in your day without extra tools.
<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 secure story gives new ideas to life on any device. A friendly routine connects time back in your day without extra tools.
</div>
</div>2Link toggle
A link with href="#id" and role="button" works the same way.
What does this mean?
The new transparent reports makes customers coming back from the very first day.
<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" 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 transparent reports makes customers coming back from the very first day.</p>
</div>3Horizontal collapse
collapse-horizontal animates the width; the content needs a fixed width.
This focused experience shows you focused on what matters in just a few clicks.
<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;">
This focused experience shows you focused on what matters in just a few clicks.
</div>
</div>
</div>4Multiple targets
One button can toggle several elements by targeting a shared class.
A simple launch brings customers coming back all year round.
This elegant plan helps you focused on what matters in just a few clicks.
<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">
A simple launch brings customers coming back all year round.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ui-collapse multi-group-913" id="multi-912">
<div class="card card-body">
This elegant plan helps you focused on what matters in just a few clicks.
</div>
</div>
</div>
</div>5Read more
Show the first part of a text and reveal the rest on demand.
This smart update turns decisions quicker and clearer with friendly support. This calm plan brings your work organised in just a few clicks.
A friendly experience shows your work organised without the usual hassle. This honest update brings you focused on what matters from the very first day. Our volunteer programs keeps your work organised all year round.
<p class="mb-1">This smart update turns decisions quicker and clearer with friendly support. This calm plan brings your work organised in just a few clicks.</p>
<div class="ui-collapse" id="more-914">
<p class="mb-1">A friendly experience shows your work organised without the usual hassle. This honest update brings you focused on what matters from the very first day. Our volunteer programs keeps your work organised all year round.</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="Freya Moreau">
</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" 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" 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" 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-4815 | $546.04 | |
Billed to Chloe Brennan, Barcelona. Due Dec 28, 2026. | ||
| #PO-5714 | $308.55 | |
Billed to Nadia Alvarez, Vancouver. Due Jan 28, 2027. | ||
<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-4815</td>
<td>$546.04</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 Chloe Brennan, Barcelona. Due Dec 28, 2026.</div></div></td>
</tr>
<tr>
<td>#PO-5714</td>
<td>$308.55</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 Nadia Alvarez, Vancouver. Due Jan 28, 2027.</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" 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="how-we-rebuilt-our-update">
<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
27.5k
12% 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" 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">
27.5k
</div>
<div class="small text-success">
<i class="bi bi-arrow-up" aria-hidden="true"></i> 12% this week
</div>
</div>
</div>
</div>11Open by default
Add .show to start expanded; the button's aria-expanded is then true.
The new volunteer network shows you focused on what matters on any device. The new transparent reports lets you focused on what matters in just a few clicks.
<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">
The new volunteer network shows you focused on what matters on any device. The new transparent reports lets you focused on what matters in just a few clicks.
</div>
</div>12Rotating chevron
A chevron that turns when the panel opens, driven by aria-expanded in CSS.
Our food relief connects every detail in view in just a few clicks.
<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 food relief connects every detail in view in just a few clicks.
</div>
</div>13Comments thread
Keep a feed short and let readers open the replies.
Our volunteer programs connects the whole team on the same page for teams of every size.
View 2 replies
Ivy Haddad Our food relief turns decisions quicker and clearer for teams of every size.
Omar Carter This secure story guides results you can measure at a fair price.
<p class="mb-1">Our volunteer programs connects 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" 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-12.svg" alt="Ivy Haddad" class="rounded-full shrink-0" width="32" height="32">
<div class="bg-surface-3 rounded-md p-2 small">
<strong>Ivy Haddad</strong> Our food relief turns decisions quicker and clearer for teams of every size.
</div>
</div>
<div class="flex gap-2 mb-2">
<img src="../assets/img/avatar-6.svg" alt="Omar Carter" class="rounded-full shrink-0" width="32" height="32">
<div class="bg-surface-3 rounded-md p-2 small">
<strong>Omar Carter</strong> This secure story guides results you can measure at a fair price.
</div>
</div>
</div>
</div>14Release notes
A compact version line that expands into the full change list.
Version 5.9 Stable
May 17, 2026
- Volunteer network
- Tax receipts
- 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.9</span> <span class="badge text-bg-success">Stable</span>
<div class="small text-muted">
May 17, 2026
</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>Volunteer network</li>
<li>Tax receipts</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
- 1.5 kg
- Dimensions
- 27 x 44 x 12 cm
- Warranty
- 1 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">1.5 kg</dd>
<dt class="col-sm-4">Dimensions</dt>
<dd class="col-sm-8">27 x 44 x 12 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 11
<div class="border rounded-md">
<div class="flex items-center justify-between p-2">
<span class="font-bold">Brand name 11</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 11">
</div>
</div>
</div>17Onboarding checklist
Each checklist step expands to explain what to do.
Our volunteer programs gives every detail in view with friendly support.
The new secure giving brings the whole team on the same page with friendly support.
Our disaster response keeps time back in your day with friendly support.
<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">Our volunteer programs gives every detail in view 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" 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">The new secure giving brings the whole team on the same page 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" 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 disaster response keeps time back in your day with friendly support.</p>
</div>
</div>
</div>18Swap two panels
Two collapses sharing a class swap places: one hides while the other shows.
Read-only view: This calm launch connects data easy to understand all year round.
<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: This calm launch connects data easy to understand all year round.</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" 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">Our volunteer programs gives you focused on what matters wherever you are.</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.
- A flexible dashboard guides every detail in view wherever you are.
- Our clean water helps data easy to understand in just a few clicks.
- This flexible workflow gives decisions quicker and clearer for teams of every size.
<ul class="list-group" style="max-width: 420px;">
<li class="list-group-item small"><i class="bi bi-bell" aria-hidden="true"></i> A flexible dashboard guides every detail in view wherever you are.</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">Our clean water helps data easy to understand in just a few clicks.</li><li class="list-group-item small text-muted">This flexible workflow gives decisions quicker and clearer for teams of every size.</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 5 earlier</button></li>
</ul>20Nested collapse
A collapse inside another for drilling into details step by step.
This reliable goal connects your work organised without extra tools.
- Design: $2,861.99
- Development: $7,720.16
- Marketing: $3,967.83
<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>This reliable goal connects your work organised without extra tools.</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: $2,861.99</li>
<li>Development: $7,720.16</li>
<li>Marketing: $3,967.83</li>
</ul>
</div>
</div>
</div>