Collapse

Collapse shows and hides content with a short animation. Point a button or link at the target with data-bs-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-bs-toggle="collapse" shows and hides the target.

More than sixty classes a week, from sunrise yoga to late-night spin. Clear prices, honest advice and no surprises along the way.

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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">
    More than sixty classes a week, from sunrise yoga to late-night spin. Clear prices, honest advice and no surprises along the way.
  </div>
</div>

2Link toggle

A link with href="#id" and role="button" works the same way.

What does this mean?

Beginners are always welcome, with an intro session included.

<a class="link-primary" data-bs-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">Beginners are always welcome, with an intro session included.</p>
</div>

3Horizontal collapse

collapse-horizontal animates the width; the content needs a fixed width.

Every detail is handled by people who care about getting it right.

<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-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;">
      Every detail is handled by people who care about getting it right.
    </div>
  </div>
</div>

4Multiple targets

One button can toggle several elements by targeting a shared class.

Nutrition plans fit your routine and the food you actually enjoy.

Track your progress in the app and see how far you have come.

<div class="d-flex flex-wrap gap-2 mb-2">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#multi-911" aria-expanded="false" aria-controls="multi-911">Toggle first</button>
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#multi-912" aria-expanded="false" aria-controls="multi-912">Toggle second</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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">
        Nutrition plans fit your routine and the food you actually enjoy.
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="collapse multi-group-913" id="multi-912">
      <div class="card card-body">
        Track your progress in the app and see how far you have come.
      </div>
    </div>
  </div>
</div>

5Read more

Show the first part of a text and reveal the rest on demand.

Our recovery spa has a sauna, cold plunge and massage rooms. Certified coaches design every session around your level and your goals.

Thousands of members already trust us, and we work hard to keep it that way. More than sixty classes a week, from sunrise yoga to late-night spin. Thousands of members already trust us, and we work hard to keep it that way.

<p class="mb-1">Our recovery spa has a sauna, cold plunge and massage rooms. Certified coaches design every session around your level and your goals.</p>
<div class="collapse" id="more-914">
  <p class="mb-1">Thousands of members already trust us, and we work hard to keep it that way. More than sixty classes a week, from sunrise yoga to late-night spin. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
<button class="btn btn-link px-0 ca-more" type="button" data-bs-toggle="collapse" data-bs-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.

Customer

Status

<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-bs-toggle="collapse" data-bs-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 Varga">
    </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-bs-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-bs-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-1827	$174.72
Billed to Isla Tanaka, Porto. Due Jan 17, 2027.
#PO-1351	$114.94
Billed to Mason Rossi, Auckland. Due Dec 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="visually-hidden">Details</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#TX-1827</td>
        <td>$174.72</td>
        <td class="text-end"><button class="btn btn-sm btn-light border" type="button" data-bs-toggle="collapse" data-bs-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 Isla Tanaka, Porto. Due Jan 17, 2027.</div></div></td>
      </tr>
      <tr>
        <td>#PO-1351</td>
        <td>$114.94</td>
        <td class="text-end"><button class="btn btn-sm btn-light border" type="button" data-bs-toggle="collapse" data-bs-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 Mason Rossi, Auckland. Due Dec 3, 2026.</div></div></td>
      </tr>
    </tbody>
  </table>
</div>

9Advanced form options

Hide rarely used settings behind an "Advanced" toggle.

Advanced options

URL slug

Hide from search engines

<div style="max-width: 420px;">
  <a class="small" data-bs-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="a-beginner-s-guide-to-strength-training">
      <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

<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-bs-toggle="collapse" data-bs-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">
        20.1k
      </div>
      <div class="small text-success">
        <i class="bi bi-arrow-up" aria-hidden="true"></i> 20% this week
      </div>
    </div>
  </div>
</div>

11Open by default

Add .show to start expanded; the button's aria-expanded is then true.

Modern equipment is cleaned, serviced and ready every day. Friendly people answer your questions quickly, by phone, chat or email.

<button class="btn btn-outline-dark btn-sm" type="button" data-bs-toggle="collapse" data-bs-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">
    Modern equipment is cleaned, serviced and ready every day. Friendly people answer your questions quickly, by phone, chat or email.
  </div>
</div>

12Rotating chevron

A chevron that turns when the panel opens, driven by aria-expanded in CSS.

Clear prices, honest advice and no surprises along the way.

<button class="btn btn-light border w-100 d-flex justify-content-between align-items-center ca-chev" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-927" aria-expanded="false" aria-controls="collapse-927" style="max-width: 420px;">Shipping &amp; 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">
    Clear prices, honest advice and no surprises along the way.
  </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

Samir Moreau Start in minutes and get help from a real person whenever you need it.

Omar Duarte Pause or change your membership any time, with no long contracts.

<p class="mb-1">We listen first, then build a plan around what you actually need.</p>
<a class="small" data-bs-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-7.svg" alt="Samir Moreau" class="rounded-circle flex-shrink-0" width="32" height="32">
      <div class="bg-body-tertiary rounded p-2 small">
        <strong>Samir Moreau</strong> Start in minutes and get help from a real person whenever you need it.
      </div>
    </div>
    <div class="d-flex gap-2 mb-2">
      <img src="../assets/img/avatar-4.svg" alt="Omar Duarte" class="rounded-circle flex-shrink-0" width="32" height="32">
      <div class="bg-body-tertiary rounded p-2 small">
        <strong>Omar Duarte</strong> Pause or change your membership any time, with no long contracts.
      </div>
    </div>
  </div>
</div>

14Release notes

A compact version line that expands into the full change list.

Version 6.5 Stable

Aug 12, 2026

Progress tracking
Modern equipment
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 6.5</span> <span class="badge text-bg-success">Stable</span>
      <div class="small text-body-secondary">
        Aug 12, 2026
      </div>
    </div>
    <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-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>Progress tracking</li>
      <li>Modern equipment</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: 4.7 kg
Dimensions: 45 x 42 x 11 cm
Warranty: 2 years

<button class="btn btn-outline-secondary w-100" type="button" data-bs-toggle="collapse" data-bs-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">4.7 kg</dd>
    <dt class="col-sm-4">Dimensions</dt>
    <dd class="col-sm-8">45 x 42 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.

Kiteora HQ

<div class="border rounded">
  <div class="d-flex align-items-center justify-content-between p-2">
    <span class="fw-bold">Kiteora HQ</span>
    <button class="btn btn-light" type="button" data-bs-toggle="collapse" data-bs-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 Kiteora HQ">
    </div>
  </div>
</div>

17Onboarding checklist

Each checklist step expands to explain what to do.

Beginners are always welcome, with an intro session included.

Community events keep you motivated, from fun runs to workshops.

Nutrition plans fit your routine and the food you actually enjoy.

<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-bs-toggle="collapse" data-bs-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">Beginners are always welcome, with an intro session included.</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-bs-toggle="collapse" data-bs-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">Community events keep you motivated, from fun runs to workshops.</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-bs-toggle="collapse" data-bs-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">Nutrition plans fit your routine and the food you actually enjoy.</p>
    </div>
  </div>
</div>

18Swap two panels

Two collapses sharing a class swap places: one hides while the other shows.

Read-only view: Track your progress in the app and see how far you have come.

Description

<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: Track your progress in the app and see how far you have come.</p>
      <button class="btn btn-primary btn-sm align-self-start" type="button" data-bs-toggle="collapse" data-bs-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">We measure success by how many members come back and tell their friends.</textarea>
      <button class="btn btn-success btn-sm align-self-start" type="button" data-bs-toggle="collapse" data-bs-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.

Certified coaches design every session around your level and your goals.
- Small group classes mean your coach knows your name and your form.
- Open 24 hours, so you can train whenever it suits your day.

<ul class="list-group" style="max-width: 420px;">
  <li class="list-group-item small"><i class="bi bi-bell-fill" aria-hidden="true"></i> Certified coaches design every session around your level and your goals.</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">Small group classes mean your coach knows your name and your form.</li><li class="list-group-item small text-body-secondary">Open 24 hours, so you can train whenever it suits your day.</li></ul></div><button class="btn btn-link btn-sm w-100" type="button" data-bs-toggle="collapse" data-bs-target="#group-939" aria-expanded="false" aria-controls="group-939">Show 4 earlier</button></li>
</ul>

20Nested collapse

A collapse inside another for drilling into details step by step.

We keep things simple, so you can focus on what matters to you.

Design: $3,993.33
Development: $13,462.35
Marketing: $4,731.46

<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-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>We keep things simple, so you can focus on what matters to you.</p>
    <button class="btn btn-sm btn-outline-secondary align-self-start" type="button" data-bs-toggle="collapse" data-bs-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: $3,993.33</li>
        <li>Development: $13,462.35</li>
        <li>Marketing: $4,731.46</li>
      </ul>
    </div>
  </div>
</div>