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.
We listen first, then build a plan around what you actually need. Family rooms, adults-only retreats and pet-friendly stays in one search.
<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">
We listen first, then build a plan around what you actually need. Family rooms, adults-only retreats and pet-friendly stays in one search.
</div>
</div>2Link toggle
A link with href="#id" and role="button" works the same way.
What does this mean?
Members get room upgrades and late check-out at selected hotels.
<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">Members get room upgrades and late check-out at selected hotels.</p>
</div>3Horizontal collapse
collapse-horizontal animates the width; the content needs a fixed width.
Flexible dates help you find quieter weeks and better prices.
<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;">
Flexible dates help you find quieter weeks and better prices.
</div>
</div>
</div>4Multiple targets
One button can toggle several elements by targeting a shared class.
Our travel experts are on call around the clock while you are away.
Every detail is handled by people who care about getting it right.
<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">
Our travel experts are on call around the clock while you are away.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ui-collapse multi-group-913" id="multi-912">
<div class="card card-body">
Every detail is handled by people who care about getting it right.
</div>
</div>
</div>
</div>5Read more
Show the first part of a text and reveal the rest on demand.
Local guides show you the places that never make it into guidebooks. Free cancellation on most stays means you can book now and decide later.
Our team has done this many times, so you never have to guess. Our travel experts are on call around the clock while you are away. Free cancellation on most stays means you can book now and decide later.
<p class="mb-1">Local guides show you the places that never make it into guidebooks. Free cancellation on most stays means you can book now and decide later.</p>
<div class="ui-collapse" id="more-914">
<p class="mb-1">Our team has done this many times, so you never have to guess. Our travel experts are on call around the clock while you are away. Free cancellation on most stays means you can book now and decide later.</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 Ashford">
</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-8691 | $661.78 | |
Billed to Arjun Alvarez, Cape Town. Due Dec 3, 2026. | ||
| #ORD-6019 | $96.27 | |
Billed to Mason Quinn, Toronto. Due Nov 19, 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-8691</td>
<td>$661.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 Arjun Alvarez, Cape Town. Due Dec 3, 2026.</div></div></td>
</tr>
<tr>
<td>#ORD-6019</td>
<td>$96.27</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 Mason Quinn, Toronto. Due Nov 19, 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="how-to-choose-the-right-trip">
<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
69.6k
16% 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">
69.6k
</div>
<div class="small text-success-emphasis">
<i class="bi bi-arrow-up" aria-hidden="true"></i> 16% this week
</div>
</div>
</div>
</div>11Open by default
Add .show to start expanded; the button's aria-expanded is then true.
Every trip supports local businesses and responsible tourism. Airport transfers, tours and dinners are arranged before you arrive.
<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">
Every trip supports local businesses and responsible tourism. Airport transfers, tours and dinners are arranged before you arrive.
</div>
</div>12Rotating chevron
A chevron that turns when the panel opens, driven by aria-expanded in CSS.
Every hotel on our list is visited and reviewed by our own travel team.
<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">
Every hotel on our list is visited and reviewed by our own travel team.
</div>
</div>13Comments thread
Keep a feed short and let readers open the replies.
We listen first, then build a plan around what you actually need.
View 2 replies
Theo Ibrahim Local guides show you the places that never make it into guidebooks.
Kenji Kim Our team has done this many times, so you never have to guess.
<p class="mb-1">We listen first, then build a plan around what you actually need.</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="Theo Ibrahim" class="rounded-full shrink-0" width="32" height="32">
<div class="bg-surface-3 rounded-md p-2 small">
<strong>Theo Ibrahim</strong> Local guides show you the places that never make it into guidebooks.
</div>
</div>
<div class="flex gap-2 mb-2">
<img src="../assets/img/avatar-2.svg" alt="Kenji Kim" class="rounded-full shrink-0" width="32" height="32">
<div class="bg-surface-3 rounded-md p-2 small">
<strong>Kenji Kim</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 2.9 Stable
Sep 17, 2025
- 24/7 assistance
- Best price guarantee
- 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 2.9</span> <span class="badge text-bg-success">Stable</span>
<div class="small text-muted">
Sep 17, 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>24/7 assistance</li>
<li>Best price guarantee</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.1 kg
- Dimensions
- 28 x 49 x 19 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">1.1 kg</dd>
<dt class="col-sm-4">Dimensions</dt>
<dd class="col-sm-8">28 x 49 x 19 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.
Orbiora
<div class="border rounded-md">
<div class="flex items-center justify-between p-2">
<span class="font-bold">Orbiora</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 Orbiora">
</div>
</div>
</div>17Onboarding checklist
Each checklist step expands to explain what to do.
Thousands of travellers already trust us, and we work hard to keep it that way.
We measure success by how many travellers come back and tell their friends.
Travel insurance and car rental can be added in a single click.
<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">Thousands of travellers already trust us, and we work hard to keep it that way.</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">We measure success by how many travellers come back and tell their friends.</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">Travel insurance and car rental can be added in a single click.</p>
</div>
</div>
</div>18Swap two panels
Two collapses sharing a class swap places: one hides while the other shows.
Read-only view: Friendly people answer your questions quickly, by phone, chat or email.
<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: Friendly people answer your questions quickly, by phone, chat or email.</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 keep things simple, so you can focus on what matters to you.</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.
- Start in minutes and get help from a real person whenever you need it.
- Clear prices, honest advice and no surprises along the way.
- Every detail is handled by people who care about getting it right.
<ul class="list-group" style="max-width: 420px;">
<li class="list-group-item small"><i class="bi bi-bell-fill" aria-hidden="true"></i> Start in minutes and get help from a real person whenever you need it.</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">Clear prices, honest advice and no surprises along the way.</li><li class="list-group-item small text-muted">Every detail is handled by people who care about getting it right.</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.
Family rooms, adults-only retreats and pet-friendly stays in one search.
- Design: $2,667.29
- Development: $6,389.70
- Marketing: $2,152.84
<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>Family rooms, adults-only retreats and pet-friendly stays in one search.</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,667.29</li>
<li>Development: $6,389.70</li>
<li>Marketing: $2,152.84</li>
</ul>
</div>
</div>
</div>