Accordion
Accordions stack collapsible panels so long content stays short and scannable. They are built on the collapse plugin: link each panel to a parent with data-bs-parent for one-at-a-time behaviour, or leave it out to let several stay open.
1Basic accordion
Three panels where opening one closes the others; the first panel starts open.
Our 30-day returns guides customers coming back from the very first day.
Built for everyday shoppers. The new carbon-neutral delivery makes every detail in view wherever you are.
A flexible plan lets decisions quicker and clearer without extra tools.
<div class="accordion" id="acc-699">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-700"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-701" aria-expanded="true" aria-controls="acc-body-701">What is Brand name 17?</button> </h2>
<div id="acc-body-701" class="accordion-collapse collapse show" aria-labelledby="acc-head-700" data-bs-parent="#acc-699">
<div class="accordion-body">
<p class="mb-0">Our 30-day returns guides customers coming back from the very first day.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-702"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-703" aria-expanded="false" aria-controls="acc-body-703">Who is it for?</button> </h2>
<div id="acc-body-703" class="accordion-collapse collapse" aria-labelledby="acc-head-702" data-bs-parent="#acc-699">
<div class="accordion-body">
<p class="mb-0">Built for everyday shoppers. The new carbon-neutral delivery makes every detail in view wherever you are.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-704"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-705" aria-expanded="false" aria-controls="acc-body-705">How do I get started?</button> </h2>
<div id="acc-body-705" class="accordion-collapse collapse" aria-labelledby="acc-head-704" data-bs-parent="#acc-699">
<div class="accordion-body">
<p class="mb-0">A flexible plan lets decisions quicker and clearer without extra tools.</p>
</div>
</div>
</div>
</div>2Flush accordion
Removes the outer borders and rounded corners so the accordion sits edge to edge inside a parent.
Our secure checkout lets data easy to understand without the usual hassle.
Our 30-day returns makes your work organised at a fair price.
This modern release keeps new ideas to life without the usual hassle.
<div class="accordion accordion-flush border-top border-bottom" id="acc-706">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-707"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-708" aria-expanded="false" aria-controls="acc-body-708">Live order tracking</button> </h2>
<div id="acc-body-708" class="accordion-collapse collapse" aria-labelledby="acc-head-707" data-bs-parent="#acc-706">
<div class="accordion-body">
<p class="mb-0">Our secure checkout lets data easy to understand without the usual hassle.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-709"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-710" aria-expanded="false" aria-controls="acc-body-710">Free shipping</button> </h2>
<div id="acc-body-710" class="accordion-collapse collapse" aria-labelledby="acc-head-709" data-bs-parent="#acc-706">
<div class="accordion-body">
<p class="mb-0">Our 30-day returns makes your work organised at a fair price.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-711"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-712" aria-expanded="false" aria-controls="acc-body-712">Gift wrapping</button> </h2>
<div id="acc-body-712" class="accordion-collapse collapse" aria-labelledby="acc-head-711" data-bs-parent="#acc-706">
<div class="accordion-body">
<p class="mb-0">This modern release keeps new ideas to life without the usual hassle.</p>
</div>
</div>
</div>
</div>3Always open
Leave out data-bs-parent and each panel opens and closes on its own, so several can be open at once.
Our live order tracking keeps the whole team on the same page without extra tools.
Our gift wrapping keeps results you can measure on any device.
This simple idea makes projects moving forward without the usual hassle.
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-713"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-714" aria-expanded="true" aria-controls="acc-body-714">Morning session</button> </h2>
<div id="acc-body-714" class="accordion-collapse collapse show" aria-labelledby="acc-head-713">
<div class="accordion-body">
<p class="mb-0">Our live order tracking keeps the whole team on the same page without extra tools.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-715"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-716" aria-expanded="true" aria-controls="acc-body-716">Afternoon session</button> </h2>
<div id="acc-body-716" class="accordion-collapse collapse show" aria-labelledby="acc-head-715">
<div class="accordion-body">
<p class="mb-0">Our gift wrapping keeps results you can measure on any device.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-717"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-718" aria-expanded="false" aria-controls="acc-body-718">Evening wrap-up</button> </h2>
<div id="acc-body-718" class="accordion-collapse collapse" aria-labelledby="acc-head-717">
<div class="accordion-body">
<p class="mb-0">This simple idea makes projects moving forward without the usual hassle.</p>
</div>
</div>
</div>
</div>4All panels collapsed
Start with everything closed when the headers alone give a good overview.
Our live order tracking keeps you focused on what matters without extra tools.
A fast community makes new ideas to life from the very first day.
Our 30-day returns brings customers coming back from the very first day.
Our secure checkout keeps every detail in view in just a few clicks.
<div class="accordion" id="acc-719">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-720"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-721" aria-expanded="false" aria-controls="acc-body-721">Step 1 · Create your account</button> </h2>
<div id="acc-body-721" class="accordion-collapse collapse" aria-labelledby="acc-head-720" data-bs-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">Our live order tracking keeps you focused on what matters without extra tools.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-722"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-723" aria-expanded="false" aria-controls="acc-body-723">Step 2 · Invite your team</button> </h2>
<div id="acc-body-723" class="accordion-collapse collapse" aria-labelledby="acc-head-722" data-bs-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">A fast community makes new ideas to life from the very first day.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-724"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-725" aria-expanded="false" aria-controls="acc-body-725">Step 3 · Connect your tools</button> </h2>
<div id="acc-body-725" class="accordion-collapse collapse" aria-labelledby="acc-head-724" data-bs-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">Our 30-day returns brings customers coming back from the very first day.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-726"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-727" aria-expanded="false" aria-controls="acc-body-727">Step 4 · Publish</button> </h2>
<div id="acc-body-727" class="accordion-collapse collapse" aria-labelledby="acc-head-726" data-bs-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">Our secure checkout keeps every detail in view in just a few clicks.</p>
</div>
</div>
</div>
</div>5FAQ with icons
A help-centre FAQ: an icon in each header makes the questions easy to scan.
All major cards and bank transfer. Our live order tracking guides time back in your day all year round.
Yes, upgrade or downgrade at any time. A secure project brings customers coming back at a fair price.
The new secure payments guides you focused on what matters without extra tools.
Write to support any day of the week. The new member prices shows customers coming back in just a few clicks.
<div class="accordion" id="faq-728">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-729"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-730" aria-expanded="true" aria-controls="acc-body-730"><span class="text-primary me-2"><i class="bi bi-credit-card-fill" aria-hidden="true"></i></span>Which payment methods do you accept?</button> </h2>
<div id="acc-body-730" class="accordion-collapse collapse show" aria-labelledby="acc-head-729" data-bs-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">All major cards and bank transfer. Our live order tracking guides time back in your day all year round.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-731"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-732" aria-expanded="false" aria-controls="acc-body-732"><span class="text-primary me-2"><i class="bi bi-arrow-repeat" aria-hidden="true"></i></span>Can I change my plan later?</button> </h2>
<div id="acc-body-732" class="accordion-collapse collapse" aria-labelledby="acc-head-731" data-bs-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">Yes, upgrade or downgrade at any time. A secure project brings customers coming back at a fair price.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-733"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-734" aria-expanded="false" aria-controls="acc-body-734"><span class="text-primary me-2"><i class="bi bi-shield-check" aria-hidden="true"></i></span>Is my data safe?</button> </h2>
<div id="acc-body-734" class="accordion-collapse collapse" aria-labelledby="acc-head-733" data-bs-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">The new secure payments guides you focused on what matters without extra tools.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-735"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-736" aria-expanded="false" aria-controls="acc-body-736"><span class="text-primary me-2"><i class="bi bi-headset" aria-hidden="true"></i></span>How do I contact support?</button> </h2>
<div id="acc-body-736" class="accordion-collapse collapse" aria-labelledby="acc-head-735" data-bs-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">Write to support any day of the week. The new member prices shows customers coming back in just a few clicks.</p>
</div>
</div>
</div>
</div>6Headers with badges
Count badges pushed to the right show how many items wait inside each panel.
A elegant update makes decisions quicker and clearer in just a few clicks.
This clear story helps decisions quicker and clearer in just a few clicks.
Our gift wrapping guides results you can measure with friendly support.
<div class="accordion" id="acc-737">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-738"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-739" aria-expanded="false" aria-controls="acc-body-739"><span class="flex-grow-1">Open tickets</span><span class="badge text-bg-danger rounded-pill me-3">9</span></button> </h2>
<div id="acc-body-739" class="accordion-collapse collapse" aria-labelledby="acc-head-738" data-bs-parent="#acc-737">
<div class="accordion-body">
<p class="mb-0">A elegant update makes decisions quicker and clearer in just a few clicks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-740"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-741" aria-expanded="false" aria-controls="acc-body-741"><span class="flex-grow-1">Waiting for reply</span><span class="badge text-bg-warning rounded-pill me-3">4</span></button> </h2>
<div id="acc-body-741" class="accordion-collapse collapse" aria-labelledby="acc-head-740" data-bs-parent="#acc-737">
<div class="accordion-body">
<p class="mb-0">This clear story helps decisions quicker and clearer in just a few clicks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-742"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-743" aria-expanded="false" aria-controls="acc-body-743"><span class="flex-grow-1">Resolved this week</span><span class="badge text-bg-success rounded-pill me-3">24</span></button> </h2>
<div id="acc-body-743" class="accordion-collapse collapse" aria-labelledby="acc-head-742" data-bs-parent="#acc-737">
<div class="accordion-body">
<p class="mb-0">Our gift wrapping guides results you can measure with friendly support.</p>
</div>
</div>
</div>
</div>7Settings panel in a card
A flush accordion inside a card groups account settings into tidy sections.
Account settings
A simple experience makes customers coming back all year round.
<div class="card">
<div class="card-header fw-semibold">
<i class="bi bi-gear-fill" aria-hidden="true"></i> Account settings
</div>
<div class="accordion accordion-flush" id="acc-744">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-747"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-748" aria-expanded="true" aria-controls="acc-body-748">Profile</button> </h2>
<div id="acc-body-748" class="accordion-collapse collapse show" aria-labelledby="acc-head-747" data-bs-parent="#acc-744">
<div class="accordion-body">
<div class="mb-3">
<label class="form-label" for="set-name-745">Display name</label>
<input class="form-control" id="set-name-745" type="text" value="Leo Larsen">
</div>
<button type="button" class="btn btn-primary btn-sm">Save profile</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-749"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-750" aria-expanded="false" aria-controls="acc-body-750">Notifications</button> </h2>
<div id="acc-body-750" class="accordion-collapse collapse" aria-labelledby="acc-head-749" data-bs-parent="#acc-744">
<div class="accordion-body">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="set-switch-746" checked>
<label class="form-check-label" for="set-switch-746">Email me about new activity</label>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-751"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-752" aria-expanded="false" aria-controls="acc-body-752">Privacy</button> </h2>
<div id="acc-body-752" class="accordion-collapse collapse" aria-labelledby="acc-head-751" data-bs-parent="#acc-744">
<div class="accordion-body">
<p class="mb-0 text-body-secondary">A simple experience makes customers coming back all year round.</p>
</div>
</div>
</div>
</div>
</div>8Order history
Each header summarises an order (number, date, status); the body holds the line items.
| Item | Qty | Total |
|---|---|---|
| Canvas tote | 3 | $95.00 |
| Item | Qty | Total |
|---|---|---|
| Linen shirt | 2 | $429.99 |
| Item | Qty | Total |
|---|---|---|
| Glass bottle | 2 | $174.00 |
<div class="accordion" id="orders-753">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-754"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-755" aria-expanded="true" aria-controls="acc-body-755"><span class="fw-semibold me-2">#TX-5288</span><span class="text-body-secondary small flex-grow-1">Jul 11, 2026</span><span class="badge text-bg-success me-3">Shipped</span></button> </h2>
<div id="acc-body-755" class="accordion-collapse collapse show" aria-labelledby="acc-head-754" data-bs-parent="#orders-753">
<div class="accordion-body">
<div class="table-responsive">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col" class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Canvas tote</td>
<td>3</td>
<td class="text-end">$95.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-756"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-757" aria-expanded="false" aria-controls="acc-body-757"><span class="fw-semibold me-2">#ORD-8893</span><span class="text-body-secondary small flex-grow-1">Jul 27, 2026</span><span class="badge text-bg-warning me-3">Processing</span></button> </h2>
<div id="acc-body-757" class="accordion-collapse collapse" aria-labelledby="acc-head-756" data-bs-parent="#orders-753">
<div class="accordion-body">
<div class="table-responsive">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col" class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Linen shirt</td>
<td>2</td>
<td class="text-end">$429.99</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-758"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-759" aria-expanded="false" aria-controls="acc-body-759"><span class="fw-semibold me-2">#ORD-5876</span><span class="text-body-secondary small flex-grow-1">Dec 15, 2025</span><span class="badge text-bg-secondary me-3">Cancelled</span></button> </h2>
<div id="acc-body-759" class="accordion-collapse collapse" aria-labelledby="acc-head-758" data-bs-parent="#orders-753">
<div class="accordion-body">
<div class="table-responsive">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col" class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Glass bottle</td>
<td>2</td>
<td class="text-end">$174.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>9Sidebar navigation
Collapsible menu sections with list groups as bodies, a common admin sidebar pattern.
<div class="accordion ca-acc-nav" id="nav-760" style="max-width: 320px;">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-761"> <button class="accordion-button py-2" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-762" aria-expanded="true" aria-controls="acc-body-762"><i class="bi bi-speedometer2" aria-hidden="true"></i><span class="ms-2">Dashboard</span></button> </h2>
<div id="acc-body-762" class="accordion-collapse collapse show" aria-labelledby="acc-head-761" data-bs-parent="#nav-760">
<div class="accordion-body">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">Overview</a><a href="#" class="list-group-item list-group-item-action">Reports</a><a href="#" class="list-group-item list-group-item-action">Live view</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-763"> <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-764" aria-expanded="false" aria-controls="acc-body-764"><i class="bi bi-people-fill" aria-hidden="true"></i><span class="ms-2">Customers</span></button> </h2>
<div id="acc-body-764" class="accordion-collapse collapse" aria-labelledby="acc-head-763" data-bs-parent="#nav-760">
<div class="accordion-body">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">All customers</a><a href="#" class="list-group-item list-group-item-action">Segments</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-765"> <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-766" aria-expanded="false" aria-controls="acc-body-766"><i class="bi bi-box-seam-fill" aria-hidden="true"></i><span class="ms-2">Catalogue</span></button> </h2>
<div id="acc-body-766" class="accordion-collapse collapse" aria-labelledby="acc-head-765" data-bs-parent="#nav-760">
<div class="accordion-body">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">Products</a><a href="#" class="list-group-item list-group-item-action">Categories</a><a href="#" class="list-group-item list-group-item-action">Inventory</a>
</div>
</div>
</div>
</div>
</div>10Checkout steps
A checkout split into steps, each holding a small form; a classic one-page checkout layout.
Order total: $177.89
<div class="accordion" id="checkout-767">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-773"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-774" aria-expanded="true" aria-controls="acc-body-774"><span class="badge rounded-pill text-bg-primary me-2">1</span>Shipping address</button> </h2>
<div id="acc-body-774" class="accordion-collapse collapse show" aria-labelledby="acc-head-773" data-bs-parent="#checkout-767">
<div class="accordion-body">
<div class="row g-2">
<div class="col-12">
<label class="form-label" for="co-name-768">Full name</label>
<input class="form-control" id="co-name-768" type="text" placeholder="Ava Okafor">
</div>
<div class="col-md-8">
<label class="form-label" for="co-addr-769">Street</label>
<input class="form-control" id="co-addr-769" type="text" placeholder="221 Lakeview Terrace">
</div>
<div class="col-md-4">
<label class="form-label" for="co-city-770">City</label>
<input class="form-control" id="co-city-770" type="text" placeholder="Kyoto">
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-775"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-776" aria-expanded="false" aria-controls="acc-body-776"><span class="badge rounded-pill text-bg-secondary me-2">2</span>Delivery method</button> </h2>
<div id="acc-body-776" class="accordion-collapse collapse" aria-labelledby="acc-head-775" data-bs-parent="#checkout-767">
<div class="accordion-body">
<div class="form-check">
<input class="form-check-input" type="radio" name="co-ship-771" id="co-ship-771" checked>
<label class="form-check-label" for="co-ship-771">Standard (3-5 days) · Free</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="co-ship-771" id="co-ship-772">
<label class="form-check-label" for="co-ship-772">Express (1-2 days) · $8.48</label>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-777"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-778" aria-expanded="false" aria-controls="acc-body-778"><span class="badge rounded-pill text-bg-secondary me-2">3</span>Review and pay</button> </h2>
<div id="acc-body-778" class="accordion-collapse collapse" aria-labelledby="acc-head-777" data-bs-parent="#checkout-767">
<div class="accordion-body">
<p>Order total: <strong>$177.89</strong></p>
<button type="button" class="btn btn-success"><i class="bi bi-lock-fill" aria-hidden="true"></i> Place order</button>
</div>
</div>
</div>
</div>11Media in the body
Panels can hold any content: here an image with a short description side by side.
A simple story helps complex tasks into simple steps on any device.
View project
The new member prices brings new ideas to life wherever you are.
<div class="accordion" id="acc-779">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-780"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-781" aria-expanded="true" aria-controls="acc-body-781">What's new in beauty</button> </h2>
<div id="acc-body-781" class="accordion-collapse collapse show" aria-labelledby="acc-head-780" data-bs-parent="#acc-779">
<div class="accordion-body">
<div class="row g-3 align-items-center">
<div class="col-sm-4">
<img src="../assets/img/photo-3.svg" class="img-fluid rounded" alt="Project preview">
</div>
<div class="col-sm-8">
<p class="mb-2">A simple story helps complex tasks into simple steps on any device.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View project</a>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-782"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-783" aria-expanded="false" aria-controls="acc-body-783">Inside the fast routine</button> </h2>
<div id="acc-body-783" class="accordion-collapse collapse" aria-labelledby="acc-head-782" data-bs-parent="#acc-779">
<div class="accordion-body">
<div class="row g-3 align-items-center">
<div class="col-sm-4">
<img src="../assets/img/photo-5.svg" class="img-fluid rounded" alt="Project preview">
</div>
<div class="col-sm-8">
<p class="mb-0">The new member prices brings new ideas to life wherever you are.</p>
</div>
</div>
</div>
</div>
</div>
</div>12Tinted active header
A little custom CSS tints the open header with the theme primary colour.
The new sustainable materials turns every detail in view in just a few clicks.
A reliable story brings your work organised all year round.
The new secure payments keeps decisions quicker and clearer for teams of every size.
<div class="accordion ca-acc-tint" id="acc-784">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-785"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-786" aria-expanded="true" aria-controls="acc-body-786">Design</button> </h2>
<div id="acc-body-786" class="accordion-collapse collapse show" aria-labelledby="acc-head-785" data-bs-parent="#acc-784">
<div class="accordion-body">
<p class="mb-0">The new sustainable materials turns every detail in view in just a few clicks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-787"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-788" aria-expanded="false" aria-controls="acc-body-788">Development</button> </h2>
<div id="acc-body-788" class="accordion-collapse collapse" aria-labelledby="acc-head-787" data-bs-parent="#acc-784">
<div class="accordion-body">
<p class="mb-0">A reliable story brings your work organised all year round.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-789"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-790" aria-expanded="false" aria-controls="acc-body-790">Launch</button> </h2>
<div id="acc-body-790" class="accordion-collapse collapse" aria-labelledby="acc-head-789" data-bs-parent="#acc-784">
<div class="accordion-body">
<p class="mb-0">The new secure payments keeps decisions quicker and clearer for teams of every size.</p>
</div>
</div>
</div>
</div>13Nested accordion
An accordion inside a panel for two-level content such as chapters and lessons.
This powerful experience shows complex tasks into simple steps in just a few clicks.
A flexible community brings complex tasks into simple steps on any device.
A secure idea makes you focused on what matters for teams of every size.
<div class="accordion" id="acc-791">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-797"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-798" aria-expanded="true" aria-controls="acc-body-798">Chapter 1 · Foundations</button> </h2>
<div id="acc-body-798" class="accordion-collapse collapse show" aria-labelledby="acc-head-797" data-bs-parent="#acc-791">
<div class="accordion-body">
<div class="accordion" id="acc-inner-792">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-793"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-794" aria-expanded="false" aria-controls="acc-body-794">Lesson 1.1</button> </h2>
<div id="acc-body-794" class="accordion-collapse collapse" aria-labelledby="acc-head-793" data-bs-parent="#acc-inner-792">
<div class="accordion-body">
<p class="mb-0">This powerful experience shows complex tasks into simple steps in just a few clicks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-795"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-796" aria-expanded="false" aria-controls="acc-body-796">Lesson 1.2</button> </h2>
<div id="acc-body-796" class="accordion-collapse collapse" aria-labelledby="acc-head-795" data-bs-parent="#acc-inner-792">
<div class="accordion-body">
<p class="mb-0">A flexible community brings complex tasks into simple steps on any device.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-799"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-800" aria-expanded="false" aria-controls="acc-body-800">Chapter 2 · Going further</button> </h2>
<div id="acc-body-800" class="accordion-collapse collapse" aria-labelledby="acc-head-799" data-bs-parent="#acc-791">
<div class="accordion-body">
<p class="mb-0">A secure idea makes you focused on what matters for teams of every size.</p>
</div>
</div>
</div>
</div>14Compact accordion
Smaller padding and text for dense side panels and filters.
Beauty, Accessories
& up
<div class="accordion ca-acc-sm" id="acc-801" style="max-width: 360px;">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-804"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-805" aria-expanded="true" aria-controls="acc-body-805">Price</button> </h2>
<div id="acc-body-805" class="accordion-collapse collapse show" aria-labelledby="acc-head-804" data-bs-parent="#acc-801">
<div class="accordion-body">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-802">
<label class="form-check-label" for="chk-802">Under $50</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-803">
<label class="form-check-label" for="chk-803">$50 – $200</label>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-806"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-807" aria-expanded="false" aria-controls="acc-body-807">Category</button> </h2>
<div id="acc-body-807" class="accordion-collapse collapse" aria-labelledby="acc-head-806" data-bs-parent="#acc-801">
<div class="accordion-body">
<p class="mb-0">Beauty, Accessories</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-808"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-809" aria-expanded="false" aria-controls="acc-body-809">Rating</button> </h2>
<div id="acc-body-809" class="accordion-collapse collapse" aria-labelledby="acc-head-808" data-bs-parent="#acc-801">
<div class="accordion-body">
<p class="mb-0 text-warning"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i> & up</p>
</div>
</div>
</div>
</div>15Two-column pricing FAQ
Two independent accordions side by side fill wide screens and stack on phones.
Yes, 25 days with every feature. Our 30-day returns keeps data easy to understand all year round.
Our 30-day returns shows data easy to understand without the usual hassle.
Yearly billing saves 10%. Our live order tracking keeps customers coming back for teams of every size.
A flexible idea keeps results you can measure without the usual hassle.
<div class="row g-3">
<div class="col-md-6">
<div class="accordion" id="faq-810">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-812"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-813" aria-expanded="false" aria-controls="acc-body-813">Is there a free trial?</button> </h2>
<div id="acc-body-813" class="accordion-collapse collapse" aria-labelledby="acc-head-812" data-bs-parent="#faq-810">
<div class="accordion-body">
<p class="mb-0">Yes, 25 days with every feature. Our 30-day returns keeps data easy to understand all year round.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-814"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-815" aria-expanded="false" aria-controls="acc-body-815">Do you offer refunds?</button> </h2>
<div id="acc-body-815" class="accordion-collapse collapse" aria-labelledby="acc-head-814" data-bs-parent="#faq-810">
<div class="accordion-body">
<p class="mb-0">Our 30-day returns shows data easy to understand without the usual hassle.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion" id="faq-811">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-816"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-817" aria-expanded="false" aria-controls="acc-body-817">Can I pay yearly?</button> </h2>
<div id="acc-body-817" class="accordion-collapse collapse" aria-labelledby="acc-head-816" data-bs-parent="#faq-811">
<div class="accordion-body">
<p class="mb-0">Yearly billing saves 10%. Our live order tracking keeps customers coming back for teams of every size.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-818"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-819" aria-expanded="false" aria-controls="acc-body-819">Are there discounts for nonprofits?</button> </h2>
<div id="acc-body-819" class="accordion-collapse collapse" aria-labelledby="acc-head-818" data-bs-parent="#faq-811">
<div class="accordion-body">
<p class="mb-0">A flexible idea keeps results you can measure without the usual hassle.</p>
</div>
</div>
</div>
</div>
</div>
</div>16Team directory
Avatars and roles in the headers; contact details appear when a person is opened.
Cape Town · elena.ashford@example.com
Austin · nora.haddad@example.com
Montreal · finn.ibrahim@example.com
<div class="accordion" id="team-820">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-821"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-822" aria-expanded="false" aria-controls="acc-body-822"><img src="../assets/img/avatar-7.svg" alt="Elena Ashford" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="ms-3"><span class="d-block fw-semibold">Elena Ashford</span><span class="small text-body-secondary">Support Specialist</span></span></button> </h2>
<div id="acc-body-822" class="accordion-collapse collapse" aria-labelledby="acc-head-821" data-bs-parent="#team-820">
<div class="accordion-body">
<p class="mb-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Cape Town · <i class="bi bi-envelope-fill" aria-hidden="true"></i> elena.ashford@example.com</p>
<button type="button" class="btn btn-sm btn-outline-primary">Send message</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-823"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-824" aria-expanded="false" aria-controls="acc-body-824"><img src="../assets/img/avatar-7.svg" alt="Nora Haddad" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="ms-3"><span class="d-block fw-semibold">Nora Haddad</span><span class="small text-body-secondary">Frontend Engineer</span></span></button> </h2>
<div id="acc-body-824" class="accordion-collapse collapse" aria-labelledby="acc-head-823" data-bs-parent="#team-820">
<div class="accordion-body">
<p class="mb-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Austin · <i class="bi bi-envelope-fill" aria-hidden="true"></i> nora.haddad@example.com</p>
<button type="button" class="btn btn-sm btn-outline-primary">Send message</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-825"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-826" aria-expanded="false" aria-controls="acc-body-826"><img src="../assets/img/avatar-4.svg" alt="Finn Ibrahim" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="ms-3"><span class="d-block fw-semibold">Finn Ibrahim</span><span class="small text-body-secondary">Sales Executive</span></span></button> </h2>
<div id="acc-body-826" class="accordion-collapse collapse" aria-labelledby="acc-head-825" data-bs-parent="#team-820">
<div class="accordion-body">
<p class="mb-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Montreal · <i class="bi bi-envelope-fill" aria-hidden="true"></i> finn.ibrahim@example.com</p>
<button type="button" class="btn btn-sm btn-outline-primary">Send message</button>
</div>
</div>
</div>
</div>17Changelog
Release notes per version with type badges; the newest release starts open.
- NewSustainable materials
- ImprovedCarbon-neutral delivery
- FixedSeveral layout issues on small screens
- FixedExport now keeps the column order
<div class="accordion" id="changelog-827">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-828"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-829" aria-expanded="true" aria-controls="acc-body-829"><span class="fw-semibold me-2">v4.4.0</span><span class="badge text-bg-primary">Latest</span></button> </h2>
<div id="acc-body-829" class="accordion-collapse collapse show" aria-labelledby="acc-head-828" data-bs-parent="#changelog-827">
<div class="accordion-body">
<ul class="mb-0">
<li><span class="badge text-bg-success me-1">New</span>Sustainable materials</li>
<li><span class="badge text-bg-info me-1">Improved</span>Carbon-neutral delivery</li>
<li><span class="badge text-bg-danger me-1">Fixed</span>Several layout issues on small screens</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-830"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-831" aria-expanded="false" aria-controls="acc-body-831"><span class="fw-semibold me-2">v2.7.2</span><span class="small text-body-secondary">May 10, 2026</span></button> </h2>
<div id="acc-body-831" class="accordion-collapse collapse" aria-labelledby="acc-head-830" data-bs-parent="#changelog-827">
<div class="accordion-body">
<ul class="mb-0">
<li><span class="badge text-bg-danger me-1">Fixed</span>Export now keeps the column order</li>
</ul>
</div>
</div>
</div>
</div>18Actions inside panels
Panels that end with buttons, useful for reviewing and approving requests.
9 days from Nov 29, 2026. Our live order tracking keeps your work organised from the very first day.
A focused goal keeps the whole team on the same page without extra tools.
<div class="accordion" id="acc-832">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-833"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-834" aria-expanded="true" aria-controls="acc-body-834">Leave request · Ivy Brennan</button> </h2>
<div id="acc-body-834" class="accordion-collapse collapse show" aria-labelledby="acc-head-833" data-bs-parent="#acc-832">
<div class="accordion-body">
<p>9 days from Nov 29, 2026. Our live order tracking keeps your work organised from the very first day.</p>
<div class="d-flex gap-2">
<button type="button" class="btn btn-success btn-sm"><i class="bi bi-check-lg" aria-hidden="true"></i> Approve</button>
<button type="button" class="btn btn-outline-danger btn-sm"><i class="bi bi-x-lg" aria-hidden="true"></i> Decline</button>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-835"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-836" aria-expanded="false" aria-controls="acc-body-836">Expense claim · $864.04</button> </h2>
<div id="acc-body-836" class="accordion-collapse collapse" aria-labelledby="acc-head-835" data-bs-parent="#acc-832">
<div class="accordion-body">
<p>A focused goal keeps the whole team on the same page without extra tools.</p>
<div class="d-flex gap-2">
<button type="button" class="btn btn-success btn-sm">Approve</button>
<button type="button" class="btn btn-outline-secondary btn-sm">Ask for receipt</button>
</div>
</div>
</div>
</div>
</div>19Dark accordion
Wrap it in data-bs-theme="dark" to get a dark accordion on any page.
This secure journey lets new ideas to life all year round.
Press Ctrl + K to search everywhere.
<div data-bs-theme="dark" class="bg-dark p-3 rounded">
<div class="accordion" id="acc-837">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-838"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-839" aria-expanded="true" aria-controls="acc-body-839">Night mode</button> </h2>
<div id="acc-body-839" class="accordion-collapse collapse show" aria-labelledby="acc-head-838" data-bs-parent="#acc-837">
<div class="accordion-body">
<p class="mb-0">This secure journey lets new ideas to life all year round.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-840"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-841" aria-expanded="false" aria-controls="acc-body-841">Keyboard shortcuts</button> </h2>
<div id="acc-body-841" class="accordion-collapse collapse" aria-labelledby="acc-head-840" data-bs-parent="#acc-837">
<div class="accordion-body">
<p class="mb-0">Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to search everywhere.</p>
</div>
</div>
</div>
</div>
</div>20Course modules with progress
Each module shows its completion in the header and a progress bar inside.
This clear release turns decisions quicker and clearer for teams of every size.
This fast workflow makes every detail in view from the very first day.
The new hand-checked quality gives every detail in view on any device.
<div class="accordion" id="course-842">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-843"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-844" aria-expanded="false" aria-controls="acc-body-844"><span class="flex-grow-1"><span class="text-success me-2"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Module 1: Getting started</span><span class="small text-body-secondary me-3">100%</span></button> </h2>
<div id="acc-body-844" class="accordion-collapse collapse" aria-labelledby="acc-head-843" data-bs-parent="#course-842">
<div class="accordion-body">
<div class="progress mb-2" role="progressbar" aria-label="Module progress" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
<div class="progress-bar" style="width: 100%;">
</div>
</div>
<p class="mb-0 small">This clear release turns decisions quicker and clearer for teams of every size.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-845"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-846" aria-expanded="true" aria-controls="acc-body-846"><span class="flex-grow-1">Module 2: Core skills</span><span class="small text-body-secondary me-3">52%</span></button> </h2>
<div id="acc-body-846" class="accordion-collapse collapse show" aria-labelledby="acc-head-845" data-bs-parent="#course-842">
<div class="accordion-body">
<div class="progress mb-2" role="progressbar" aria-label="Module progress" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
<div class="progress-bar" style="width: 52%;">
</div>
</div>
<p class="mb-0 small">This fast workflow makes every detail in view from the very first day.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-847"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-848" aria-expanded="false" aria-controls="acc-body-848"><span class="flex-grow-1">Module 3: Final project</span><span class="small text-body-secondary me-3">0%</span></button> </h2>
<div id="acc-body-848" class="accordion-collapse collapse" aria-labelledby="acc-head-847" data-bs-parent="#course-842">
<div class="accordion-body">
<div class="progress mb-2" role="progressbar" aria-label="Module progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
<div class="progress-bar" style="width: 0%;">
</div>
</div>
<p class="mb-0 small">The new hand-checked quality gives every detail in view on any device.</p>
</div>
</div>
</div>
</div>