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.
Our menu changes with the seasons and the best produce from nearby farms. We have been feeding this neighbourhood for over a decade, and we still love it.
<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="collapse" id="collapse-908">
<div class="card card-body mt-2">
Our menu changes with the seasons and the best produce from nearby farms. We have been feeding this neighbourhood for over a decade, and we still love it.
</div>
</div>2Link toggle
A link with href="#id" and role="button" works the same way.
What does this mean?
Friendly people answer your questions quickly, by phone, chat or email.
<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="collapse" id="collapse-909">
<p class="small text-body-secondary mt-2 mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>3Horizontal collapse
collapse-horizontal animates the width; the content needs a fixed width.
Thousands of guests already trust us, and we work hard to keep it that way.
<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="collapse collapse-horizontal" id="collapse-910">
<div class="card card-body" style="width: 260px;">
Thousands of guests already trust us, and we work hard to keep it that way.
</div>
</div>
</div>4Multiple targets
One button can toggle several elements by targeting a shared class.
Cooking classes on Saturday mornings teach you our favourite recipes.
Our sommelier has paired each dish with wines from small family vineyards.
<div class="d-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="collapse multi-group-913" id="multi-911">
<div class="card card-body">
Cooking classes on Saturday mornings teach you our favourite recipes.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="collapse multi-group-913" id="multi-912">
<div class="card card-body">
Our sommelier has paired each dish with wines from small family vineyards.
</div>
</div>
</div>
</div>5Read more
Show the first part of a text and reveal the rest on demand.
Order for pickup or delivery and enjoy the same dishes at home. We listen first, then build a plan around what you actually need.
Our team has done this many times, so you never have to guess. We have been feeding this neighbourhood for over a decade, and we still love it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
<p class="mb-1">Order for pickup or delivery and enjoy the same dishes at home. We listen first, then build a plan around what you actually need.</p>
<div class="collapse" id="more-914">
<p class="mb-1">Our team has done this many times, so you never have to guess. We have been feeding this neighbourhood for over a decade, and we still love it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</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="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-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="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="Ivy Hughes">
</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-fill" aria-hidden="true"></i> Home</a></li>
<li class="nav-item"><a class="nav-link link-body-emphasis d-flex justify-content-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="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-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="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 |
|---|---|---|
| #TX-7690 | $687.86 | |
Billed to Mason Alvarez, Valencia. Due Nov 26, 2026. | ||
| #PO-1164 | $260.87 | |
Billed to Theo Mensah, Melbourne. Due Jan 20, 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="visually-hidden">Details</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>#TX-7690</td>
<td>$687.86</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="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 Mason Alvarez, Valencia. Due Nov 26, 2026.</div></div></td>
</tr>
<tr>
<td>#PO-1164</td>
<td>$260.87</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="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 Theo Mensah, Melbourne. Due Jan 20, 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-fill" 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="three-pasta-shapes-to-make-at-home">
<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
51.1k
23% 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-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="visually-hidden">Minimise</span></button>
</div>
<div class="collapse show" id="widget-925">
<div class="card-body">
<div class="fs-3 fw-bold">
51.1k
</div>
<div class="small text-success">
<i class="bi bi-arrow-up" aria-hidden="true"></i> 23% this week
</div>
</div>
</div>
</div>11Open by default
Add .show to start expanded; the button's aria-expanded is then true.
We measure success by how many guests come back and tell their friends. We listen first, then build a plan around what you actually need.
<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="collapse show" id="collapse-926">
<div class="alert alert-secondary mt-2 mb-0">
We measure success by how many guests come back and tell their friends. We listen first, then build a plan around what you actually need.
</div>
</div>12Rotating chevron
A chevron that turns when the panel opens, driven by aria-expanded in CSS.
Every detail is handled by people who care about getting it right.
<button class="btn btn-light border w-100 d-flex justify-content-between align-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="collapse" id="collapse-927" style="max-width: 420px;">
<div class="p-3 small">
Every detail is handled by people who care about getting it right.
</div>
</div>13Comments thread
Keep a feed short and let readers open the replies.
Every dish is cooked to order, so tell us if you would like anything changed.
View 2 replies
Ava Brennan Book a table online in seconds, or call us for groups of eight or more.
Ethan Duarte Children are always welcome, with a menu made just for them.
<p class="mb-1">Every dish is cooked to order, so tell us if you would like anything changed.</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="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-3.svg" alt="Ava Brennan" class="rounded-circle flex-shrink-0" width="32" height="32">
<div class="bg-body-tertiary rounded p-2 small">
<strong>Ava Brennan</strong> Book a table online in seconds, or call us for groups of eight or more.
</div>
</div>
<div class="d-flex gap-2 mb-2">
<img src="../assets/img/avatar-10.svg" alt="Ethan Duarte" class="rounded-circle flex-shrink-0" width="32" height="32">
<div class="bg-body-tertiary rounded p-2 small">
<strong>Ethan Duarte</strong> Children are always welcome, with a menu made just for them.
</div>
</div>
</div>
</div>14Release notes
A compact version line that expands into the full change list.
Version 4.1 Stable
May 1, 2026
- Vegan options
- Local ingredients
- 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 4.1</span> <span class="badge text-bg-success">Stable</span>
<div class="small text-body-secondary">
May 1, 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="collapse" id="notes-929">
<ul class="small mt-3 mb-0">
<li>Vegan options</li>
<li>Local ingredients</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.0 kg
- Dimensions
- 49 x 57 x 5 cm
- Warranty
- 3 years
<button class="btn btn-outline-secondary w-100" 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="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">3.0 kg</dd>
<dt class="col-sm-4">Dimensions</dt>
<dd class="col-sm-8">49 x 57 x 5 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.
Lyraia
<div class="border rounded">
<div class="d-flex align-items-center justify-content-between p-2">
<span class="fw-bold">Lyraia</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="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 Lyraia">
</div>
</div>
</div>17Onboarding checklist
Each checklist step expands to explain what to do.
Our menu changes with the seasons and the best produce from nearby farms.
Our team has done this many times, so you never have to guess.
Order for pickup or delivery and enjoy the same dishes at home.
<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-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="collapse" id="step-933">
<p class="small text-body-secondary mt-2 mb-1 ms-4">Our menu changes with the seasons and the best produce from nearby farms.</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-ui-toggle="collapse" data-ui-target="#step-934" aria-expanded="false" aria-controls="step-934"><span class="text-body-tertiary"><i class="bi bi-circle-fill" 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 team has done this many times, so you never have to guess.</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-ui-toggle="collapse" data-ui-target="#step-935" aria-expanded="false" aria-controls="step-935"><span class="text-body-tertiary"><i class="bi bi-circle-fill" 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">Order for pickup or delivery and enjoy the same dishes at home.</p>
</div>
</div>
</div>18Swap two panels
Two collapses sharing a class swap places: one hides while the other shows.
Read-only view: Our sommelier has paired each dish with wines from small family vineyards.
<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 sommelier has paired each dish with wines from small family vineyards.</p>
<button class="btn btn-primary btn-sm align-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="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">Clear prices, honest advice and no surprises along the way.</textarea>
<button class="btn btn-success btn-sm align-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.
- Thousands of guests already trust us, and we work hard to keep it that way.
- Our terrace is open from spring to autumn, with heaters for cooler evenings.
<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="collapse" id="group-939"><ul class="list-group list-group-flush"><li class="list-group-item small text-body-secondary">Thousands of guests already trust us, and we work hard to keep it that way.</li><li class="list-group-item small text-body-secondary">Our terrace is open from spring to autumn, with heaters for cooler evenings.</li></ul></div><button class="btn btn-link btn-sm w-100" type="button" data-ui-toggle="collapse" data-ui-target="#group-939" aria-expanded="false" aria-controls="group-939">Show 9 earlier</button></li>
</ul>20Nested collapse
A collapse inside another for drilling into details step by step.
Friendly people answer your questions quickly, by phone, chat or email.
- Design: $4,855.83
- Development: $15,205.27
- Marketing: $5,512.02
<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="collapse" id="outer-940">
<div class="card card-body mt-2">
<p>Friendly people answer your questions quickly, by phone, chat or email.</p>
<button class="btn btn-sm btn-outline-secondary align-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="collapse" id="inner-941">
<ul class="small mt-2 mb-0">
<li>Design: $4,855.83</li>
<li>Development: $15,205.27</li>
<li>Marketing: $5,512.02</li>
</ul>
</div>
</div>
</div>