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.
New pieces arrive every month, and the best ones sell out fast. Our packaging is plastic-free and every delivery is carbon-neutral.
<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">
New pieces arrive every month, and the best ones sell out fast. Our packaging is plastic-free and every delivery is carbon-neutral.
</div>
</div>2Link toggle
A link with href="#id" and role="button" works the same way.
What does this mean?
We work directly with makers, so prices stay fair for everyone.
<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">We work directly with makers, so prices stay fair for everyone.</p>
</div>3Horizontal collapse
collapse-horizontal animates the width; the content needs a fixed width.
Order before 2 pm and most items leave our warehouse the same day.
<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;">
Order before 2 pm and most items leave our warehouse the same day.
</div>
</div>
</div>4Multiple targets
One button can toggle several elements by targeting a shared class.
Pay securely with card, wallet or in three interest-free instalments.
Our team has done this many times, so you never have to guess.
<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">
Pay securely with card, wallet or in three interest-free instalments.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ui-collapse multi-group-913" id="multi-912">
<div class="card card-body">
Our team has done this many times, so you never have to guess.
</div>
</div>
</div>
</div>5Read more
Show the first part of a text and reveal the rest on demand.
We listen first, then build a plan around what you actually need. Every piece is made in small batches from materials we test ourselves.
Start in minutes and get help from a real person whenever you need it. We work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way.
<p class="mb-1">We listen first, then build a plan around what you actually need. Every piece is made in small batches from materials we test ourselves.</p>
<div class="ui-collapse" id="more-914">
<p class="mb-1">Start in minutes and get help from a real person whenever you need it. We work directly with makers, so prices stay fair for everyone. Clear prices, honest advice and no surprises along the way.</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="Ivy Tanaka">
</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 |
|---|---|---|
| #ORD-2762 | $65.78 | |
Billed to Hana Patel, Seoul. Due Dec 8, 2026. | ||
| #ORD-5478 | $678.97 | |
Billed to Elena Kim, Lisbon. Due Dec 17, 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>#ORD-2762</td>
<td>$65.78</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 Hana Patel, Seoul. Due Dec 8, 2026.</div></div></td>
</tr>
<tr>
<td>#ORD-5478</td>
<td>$678.97</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 Elena Kim, Lisbon. Due Dec 17, 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="what-our-shoppers-asked-us-most">
<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
89.8k
4% 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">
89.8k
</div>
<div class="small text-success-emphasis">
<i class="bi bi-arrow-up" aria-hidden="true"></i> 4% this week
</div>
</div>
</div>
</div>11Open by default
Add .show to start expanded; the button's aria-expanded is then true.
Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral.
<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">
Pay securely with card, wallet or in three interest-free instalments. Our packaging is plastic-free and every delivery is carbon-neutral.
</div>
</div>12Rotating chevron
A chevron that turns when the panel opens, driven by aria-expanded in CSS.
Friendly people answer your questions quickly, by phone, chat or email.
<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">
Friendly people answer your questions quickly, by phone, chat or email.
</div>
</div>13Comments thread
Keep a feed short and let readers open the replies.
Every piece is made in small batches from materials we test ourselves.
View 2 replies
Tariq Alvarez Thousands of shoppers already trust us, and we work hard to keep it that way.
Amara Nguyen Our team has done this many times, so you never have to guess.
<p class="mb-1">Every piece is made in small batches from materials we test ourselves.</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-6.svg" alt="Tariq Alvarez" class="rounded-full shrink-0" width="32" height="32">
<div class="bg-surface-3 rounded-md p-2 small">
<strong>Tariq Alvarez</strong> Thousands of shoppers already trust us, and we work hard to keep it that way.
</div>
</div>
<div class="flex gap-2 mb-2">
<img src="../assets/img/avatar-11.svg" alt="Amara Nguyen" class="rounded-full shrink-0" width="32" height="32">
<div class="bg-surface-3 rounded-md p-2 small">
<strong>Amara Nguyen</strong> Our team has done this many times, so you never have to guess.
</div>
</div>
</div>
</div>14Release notes
A compact version line that expands into the full change list.
Version 3.0 Stable
Mar 23, 2026
- Member prices
- Easy exchanges
- 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 3.0</span> <span class="badge text-bg-success">Stable</span>
<div class="small text-muted">
Mar 23, 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>Member prices</li>
<li>Easy exchanges</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
- 7.5 kg
- Dimensions
- 54 x 57 x 6 cm
- Warranty
- 3 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">7.5 kg</dd>
<dt class="col-sm-4">Dimensions</dt>
<dd class="col-sm-8">54 x 57 x 6 cm</dd>
<dt class="col-sm-4">Warranty</dt>
<dd class="col-sm-8 mb-0">3 years</dd>
</dl>
</div>16Expandable search bar
A search icon in a header opens a full-width search field below it.
Mira Point
<div class="border rounded-md">
<div class="flex items-center justify-between p-2">
<span class="font-bold">Mira Point</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 Mira Point">
</div>
</div>
</div>17Onboarding checklist
Each checklist step expands to explain what to do.
We keep things simple, so you can focus on what matters to you.
Gift wrapping and a handwritten note are free on every order.
Order before 2 pm and most items leave our warehouse the same day.
<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-emphasis"><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">We keep things simple, so you can focus on what matters to you.</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-tertiary"><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">Gift wrapping and a handwritten note are free on every order.</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-tertiary"><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">Order before 2 pm and most items leave our warehouse the same day.</p>
</div>
</div>
</div>18Swap two panels
Two collapses sharing a class swap places: one hides while the other shows.
Read-only view: Start in minutes and get help from a real person whenever you need it.
<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: Start in minutes and get help from a real person whenever you need it.</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">We measure success by how many shoppers come back and tell their friends.</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.
- Thousands of five-star reviews from customers who came back for more.
- Every detail is handled by people who care about getting it right.
- Free shipping on orders over $50 and easy returns within 30 days.
<ul class="list-group" style="max-width: 420px;">
<li class="list-group-item small"><i class="bi bi-bell-fill" aria-hidden="true"></i> Thousands of five-star reviews from customers who came back for more.</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">Every detail is handled by people who care about getting it right.</li><li class="list-group-item small text-muted">Free shipping on orders over $50 and easy returns within 30 days.</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 7 earlier</button></li>
</ul>20Nested collapse
A collapse inside another for drilling into details step by step.
Not sure about the size? Our fit guide and live chat help you choose.
- Design: $4,794.60
- Development: $5,519.21
- Marketing: $4,853.44
<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>Not sure about the size? Our fit guide and live chat help you choose.</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,794.60</li>
<li>Development: $5,519.21</li>
<li>Marketing: $4,853.44</li>
</ul>
</div>
</div>
</div>