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-ui-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.
This honest community shows data easy to understand from the very first day.
Built for attendees and speakers. A reliable community brings complex tasks into simple steps on any device.
A reliable goal makes decisions quicker and clearer with friendly support.
<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-ui-toggle="collapse" data-ui-target="#acc-body-701" aria-expanded="true" aria-controls="acc-body-701">What is Brand name 20?</button> </h2>
<div id="acc-body-701" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-700" data-ui-parent="#acc-699">
<div class="accordion-body">
<p class="mb-0">This honest community shows data easy to understand 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-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-702" data-ui-parent="#acc-699">
<div class="accordion-body">
<p class="mb-0">Built for attendees and speakers. A reliable community brings complex tasks into simple steps on any device.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-704"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-704" data-ui-parent="#acc-699">
<div class="accordion-body">
<p class="mb-0">A reliable goal makes decisions quicker and clearer with friendly support.</p>
</div>
</div>
</div>
</div>2Flush accordion
Removes the outer borders and rounded corners so the accordion sits edge to edge inside a parent.
A smart process lets customers coming back wherever you are.
This clear project keeps customers coming back in just a few clicks.
This practical launch lets you focused on what matters in just a few clicks.
<div class="accordion accordion-flush border-t border-b" id="acc-706">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-707"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-708" aria-expanded="false" aria-controls="acc-body-708">Networking app</button> </h2>
<div id="acc-body-708" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-707" data-ui-parent="#acc-706">
<div class="accordion-body">
<p class="mb-0">A smart process lets customers coming back wherever you are.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-709"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-710" aria-expanded="false" aria-controls="acc-body-710">Sponsorship</button> </h2>
<div id="acc-body-710" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-709" data-ui-parent="#acc-706">
<div class="accordion-body">
<p class="mb-0">This clear project keeps customers coming back in just a few clicks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-711"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-712" aria-expanded="false" aria-controls="acc-body-712">Venue booking</button> </h2>
<div id="acc-body-712" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-711" data-ui-parent="#acc-706">
<div class="accordion-body">
<p class="mb-0">This practical launch lets you focused on what matters in just a few clicks.</p>
</div>
</div>
</div>
</div>3Always open
Leave out data-ui-parent and each panel opens and closes on its own, so several can be open at once.
This modern process keeps your work organised for teams of every size.
A elegant release keeps data easy to understand without the usual hassle.
The new world-class speakers gives your work organised 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-ui-toggle="collapse" data-ui-target="#acc-body-714" aria-expanded="true" aria-controls="acc-body-714">Morning session</button> </h2>
<div id="acc-body-714" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-713">
<div class="accordion-body">
<p class="mb-0">This modern process keeps your work organised for teams of every size.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-715"> <button class="accordion-button" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-716" aria-expanded="true" aria-controls="acc-body-716">Afternoon session</button> </h2>
<div id="acc-body-716" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-715">
<div class="accordion-body">
<p class="mb-0">A elegant release keeps data easy to understand without the usual hassle.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-717"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-717">
<div class="accordion-body">
<p class="mb-0">The new world-class speakers gives your work organised 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 sponsorship lets results you can measure in just a few clicks.
A elegant update turns every detail in view all year round.
Our ticketing helps you focused on what matters on any device.
This calm team gives every detail in view for teams of every size.
<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-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-720" data-ui-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">Our sponsorship lets results you can measure in just a few clicks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-722"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-722" data-ui-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">A elegant update turns every detail in view all year round.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-724"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-724" data-ui-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">Our ticketing helps you focused on what matters on any device.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-726"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-726" data-ui-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">This calm team gives every detail in view for teams of every size.</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. The new certificates lets data easy to understand wherever you are.
Yes, upgrade or downgrade at any time. The new recorded sessions connects new ideas to life for teams of every size.
A simple idea lets your work organised wherever you are.
Write to support any day of the week. The new mobile agenda makes every detail in view on any device.
<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-ui-toggle="collapse" data-ui-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 ui-collapse show" aria-labelledby="acc-head-729" data-ui-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">All major cards and bank transfer. The new certificates lets data easy to understand wherever you are.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-731"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-731" data-ui-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">Yes, upgrade or downgrade at any time. The new recorded sessions connects new ideas to life for teams of every size.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-733"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-733" data-ui-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">A simple idea lets your work organised wherever you are.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-735"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-735" data-ui-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">Write to support any day of the week. The new mobile agenda makes every detail in view on any device.</p>
</div>
</div>
</div>
</div>6Headers with badges
Count badges pushed to the right show how many items wait inside each panel.
This honest release makes the whole team on the same page wherever you are.
The new networking lounges brings projects moving forward without the usual hassle.
A flexible update guides you focused on what matters for teams of every size.
<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-ui-toggle="collapse" data-ui-target="#acc-body-739" aria-expanded="false" aria-controls="acc-body-739"><span class="grow">Open tickets</span><span class="badge text-bg-danger rounded-full me-4">8</span></button> </h2>
<div id="acc-body-739" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-738" data-ui-parent="#acc-737">
<div class="accordion-body">
<p class="mb-0">This honest release makes the whole team on the same page wherever you are.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-740"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-741" aria-expanded="false" aria-controls="acc-body-741"><span class="grow">Waiting for reply</span><span class="badge text-bg-warning rounded-full me-4">7</span></button> </h2>
<div id="acc-body-741" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-740" data-ui-parent="#acc-737">
<div class="accordion-body">
<p class="mb-0">The new networking lounges brings projects moving forward without the usual hassle.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-742"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-743" aria-expanded="false" aria-controls="acc-body-743"><span class="grow">Resolved this week</span><span class="badge text-bg-success rounded-full me-4">55</span></button> </h2>
<div id="acc-body-743" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-742" data-ui-parent="#acc-737">
<div class="accordion-body">
<p class="mb-0">A flexible update guides you focused on what matters for teams of every size.</p>
</div>
</div>
</div>
</div>7Settings panel in a card
A flush accordion inside a card groups account settings into tidy sections.
Account settings
Our venue booking gives the whole team on the same page without the usual hassle.
<div class="card">
<div class="card-header font-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-ui-toggle="collapse" data-ui-target="#acc-body-748" aria-expanded="true" aria-controls="acc-body-748">Profile</button> </h2>
<div id="acc-body-748" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-747" data-ui-parent="#acc-744">
<div class="accordion-body">
<div class="mb-4">
<label class="form-label" for="set-name-745">Display name</label>
<input class="form-control" id="set-name-745" type="text" value="Mason Lindqvist">
</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-ui-toggle="collapse" data-ui-target="#acc-body-750" aria-expanded="false" aria-controls="acc-body-750">Notifications</button> </h2>
<div id="acc-body-750" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-749" data-ui-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-ui-toggle="collapse" data-ui-target="#acc-body-752" aria-expanded="false" aria-controls="acc-body-752">Privacy</button> </h2>
<div id="acc-body-752" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-751" data-ui-parent="#acc-744">
<div class="accordion-body">
<p class="mb-0 text-muted">Our venue booking gives the whole team on the same page without the usual hassle.</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 |
|---|---|---|
| Full access pass | 1 | $139.50 |
| Item | Qty | Total |
|---|---|---|
| Virtual pass | 2 | $93.99 |
| Item | Qty | Total |
|---|---|---|
| VIP pass | 2 | $234.50 |
<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-ui-toggle="collapse" data-ui-target="#acc-body-755" aria-expanded="true" aria-controls="acc-body-755"><span class="font-semibold me-2">#PO-9432</span><span class="text-muted small grow">Jan 22, 2026</span><span class="badge text-bg-success me-4">Shipped</span></button> </h2>
<div id="acc-body-755" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-754" data-ui-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>Full access pass</td>
<td>1</td>
<td class="text-end">$139.50</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-ui-toggle="collapse" data-ui-target="#acc-body-757" aria-expanded="false" aria-controls="acc-body-757"><span class="font-semibold me-2">#PO-9387</span><span class="text-muted small grow">Nov 6, 2025</span><span class="badge text-bg-warning me-4">Processing</span></button> </h2>
<div id="acc-body-757" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-756" data-ui-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>Virtual pass</td>
<td>2</td>
<td class="text-end">$93.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-ui-toggle="collapse" data-ui-target="#acc-body-759" aria-expanded="false" aria-controls="acc-body-759"><span class="font-semibold me-2">#TX-3788</span><span class="text-muted small grow">Oct 15, 2026</span><span class="badge text-bg-secondary me-4">Cancelled</span></button> </h2>
<div id="acc-body-759" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-758" data-ui-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>VIP pass</td>
<td>2</td>
<td class="text-end">$234.50</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-ui-toggle="collapse" data-ui-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 ui-collapse show" aria-labelledby="acc-head-761" data-ui-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-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-763" data-ui-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-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-765" data-ui-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: $107.61
<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-ui-toggle="collapse" data-ui-target="#acc-body-774" aria-expanded="true" aria-controls="acc-body-774"><span class="badge rounded-full text-bg-primary me-2">1</span>Shipping address</button> </h2>
<div id="acc-body-774" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-773" data-ui-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="Elena Ibrahim">
</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="378 Riverside Drive">
</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="Toronto">
</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-ui-toggle="collapse" data-ui-target="#acc-body-776" aria-expanded="false" aria-controls="acc-body-776"><span class="badge rounded-full text-bg-secondary me-2">2</span>Delivery method</button> </h2>
<div id="acc-body-776" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-775" data-ui-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) · $9.31</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-ui-toggle="collapse" data-ui-target="#acc-body-778" aria-expanded="false" aria-controls="acc-body-778"><span class="badge rounded-full text-bg-secondary me-2">3</span>Review and pay</button> </h2>
<div id="acc-body-778" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-777" data-ui-parent="#checkout-767">
<div class="accordion-body">
<p>Order total: <strong>$107.61</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.
This modern process shows customers coming back for teams of every size.
View project
Our live streaming connects decisions quicker and clearer on any device.
<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-ui-toggle="collapse" data-ui-target="#acc-body-781" aria-expanded="true" aria-controls="acc-body-781">How we rebuilt our update</button> </h2>
<div id="acc-body-781" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-780" data-ui-parent="#acc-779">
<div class="accordion-body">
<div class="row g-3 items-center">
<div class="col-sm-4">
<img src="../assets/img/photo-3.svg" class="img-fluid rounded-md" alt="Project preview">
</div>
<div class="col-sm-8">
<p class="mb-2">This modern process shows customers coming back for teams of every size.</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-ui-toggle="collapse" data-ui-target="#acc-body-783" aria-expanded="false" aria-controls="acc-body-783">Inside the bright community</button> </h2>
<div id="acc-body-783" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-782" data-ui-parent="#acc-779">
<div class="accordion-body">
<div class="row g-3 items-center">
<div class="col-sm-4">
<img src="../assets/img/photo-5.svg" class="img-fluid rounded-md" alt="Project preview">
</div>
<div class="col-sm-8">
<p class="mb-0">Our live streaming connects decisions quicker and clearer on any device.</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 networking lounges brings your work organised without extra tools.
The new world-class speakers helps results you can measure at a fair price.
A friendly journey brings the whole team on the same page all year round.
<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-ui-toggle="collapse" data-ui-target="#acc-body-786" aria-expanded="true" aria-controls="acc-body-786">Design</button> </h2>
<div id="acc-body-786" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-785" data-ui-parent="#acc-784">
<div class="accordion-body">
<p class="mb-0">The new networking lounges brings your work organised without extra tools.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-787"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-788" aria-expanded="false" aria-controls="acc-body-788">Development</button> </h2>
<div id="acc-body-788" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-787" data-ui-parent="#acc-784">
<div class="accordion-body">
<p class="mb-0">The new world-class speakers helps results you can measure at a fair price.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-789"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-790" aria-expanded="false" aria-controls="acc-body-790">Launch</button> </h2>
<div id="acc-body-790" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-789" data-ui-parent="#acc-784">
<div class="accordion-body">
<p class="mb-0">A friendly journey brings the whole team on the same page all year round.</p>
</div>
</div>
</div>
</div>13Nested accordion
An accordion inside a panel for two-level content such as chapters and lessons.
The new hands-on workshops brings results you can measure on any device.
A calm routine brings decisions quicker and clearer all year round.
A reliable idea keeps data easy to understand at a fair price.
<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-ui-toggle="collapse" data-ui-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 ui-collapse show" aria-labelledby="acc-head-797" data-ui-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-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-793" data-ui-parent="#acc-inner-792">
<div class="accordion-body">
<p class="mb-0">The new hands-on workshops brings results you can measure on any device.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-795"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-795" data-ui-parent="#acc-inner-792">
<div class="accordion-body">
<p class="mb-0">A calm routine brings decisions quicker and clearer all year round.</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-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-799" data-ui-parent="#acc-791">
<div class="accordion-body">
<p class="mb-0">A reliable idea keeps data easy to understand at a fair price.</p>
</div>
</div>
</div>
</div>14Compact accordion
Smaller padding and text for dense side panels and filters.
Panel, Webinar
& 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-ui-toggle="collapse" data-ui-target="#acc-body-805" aria-expanded="true" aria-controls="acc-body-805">Price</button> </h2>
<div id="acc-body-805" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-804" data-ui-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-ui-toggle="collapse" data-ui-target="#acc-body-807" aria-expanded="false" aria-controls="acc-body-807">Category</button> </h2>
<div id="acc-body-807" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-806" data-ui-parent="#acc-801">
<div class="accordion-body">
<p class="mb-0">Panel, Webinar</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-808"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-809" aria-expanded="false" aria-controls="acc-body-809">Rating</button> </h2>
<div id="acc-body-809" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-808" data-ui-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, 11 days with every feature. Our live streaming gives results you can measure without extra tools.
A bright story turns the whole team on the same page at a fair price.
Yearly billing saves 23%. Our speaker management guides decisions quicker and clearer for teams of every size.
This elegant idea brings data easy to understand in just a few clicks.
<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-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-812" data-ui-parent="#faq-810">
<div class="accordion-body">
<p class="mb-0">Yes, 11 days with every feature. Our live streaming gives results you can measure without extra tools.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-814"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-814" data-ui-parent="#faq-810">
<div class="accordion-body">
<p class="mb-0">A bright story turns the whole team on the same page at a fair price.</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-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-816" data-ui-parent="#faq-811">
<div class="accordion-body">
<p class="mb-0">Yearly billing saves 23%. Our speaker management guides decisions quicker and clearer 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-ui-toggle="collapse" data-ui-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 ui-collapse" aria-labelledby="acc-head-818" data-ui-parent="#faq-811">
<div class="accordion-body">
<p class="mb-0">This elegant idea brings data easy to understand in just a few clicks.</p>
</div>
</div>
</div>
</div>
</div>
</div>16Team directory
Avatars and roles in the headers; contact details appear when a person is opened.
Edinburgh · nora.tanaka@example.com
Auckland · mason.morgan@example.com
Kyoto · mason.kowalski@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-ui-toggle="collapse" data-ui-target="#acc-body-822" aria-expanded="false" aria-controls="acc-body-822"><img src="../assets/img/avatar-6.svg" alt="Nora Tanaka" class="rounded-full shrink-0" width="36" height="36"><span class="ms-4"><span class="block font-semibold">Nora Tanaka</span><span class="small text-muted">QA Engineer</span></span></button> </h2>
<div id="acc-body-822" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-821" data-ui-parent="#team-820">
<div class="accordion-body">
<p class="mb-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Edinburgh · <i class="bi bi-envelope-fill" aria-hidden="true"></i> nora.tanaka@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-ui-toggle="collapse" data-ui-target="#acc-body-824" aria-expanded="false" aria-controls="acc-body-824"><img src="../assets/img/avatar-1.svg" alt="Mason Morgan" class="rounded-full shrink-0" width="36" height="36"><span class="ms-4"><span class="block font-semibold">Mason Morgan</span><span class="small text-muted">HR Partner</span></span></button> </h2>
<div id="acc-body-824" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-823" data-ui-parent="#team-820">
<div class="accordion-body">
<p class="mb-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Auckland · <i class="bi bi-envelope-fill" aria-hidden="true"></i> mason.morgan@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-ui-toggle="collapse" data-ui-target="#acc-body-826" aria-expanded="false" aria-controls="acc-body-826"><img src="../assets/img/avatar-3.svg" alt="Mason Kowalski" class="rounded-full shrink-0" width="36" height="36"><span class="ms-4"><span class="block font-semibold">Mason Kowalski</span><span class="small text-muted">Data Analyst</span></span></button> </h2>
<div id="acc-body-826" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-825" data-ui-parent="#team-820">
<div class="accordion-body">
<p class="mb-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Kyoto · <i class="bi bi-envelope-fill" aria-hidden="true"></i> mason.kowalski@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.
- NewNetworking lounges
- ImprovedNetworking lounges
- 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-ui-toggle="collapse" data-ui-target="#acc-body-829" aria-expanded="true" aria-controls="acc-body-829"><span class="font-semibold me-2">v4.5.0</span><span class="badge text-bg-primary">Latest</span></button> </h2>
<div id="acc-body-829" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-828" data-ui-parent="#changelog-827">
<div class="accordion-body">
<ul class="mb-0">
<li><span class="badge text-bg-success me-1">New</span>Networking lounges</li>
<li><span class="badge text-bg-info me-1">Improved</span>Networking lounges</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-ui-toggle="collapse" data-ui-target="#acc-body-831" aria-expanded="false" aria-controls="acc-body-831"><span class="font-semibold me-2">v2.8.2</span><span class="small text-muted">Jan 18, 2026</span></button> </h2>
<div id="acc-body-831" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-830" data-ui-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.
10 days from Dec 16, 2026. This fast routine brings your work organised at a fair price.
This simple team guides results you can measure for teams of every size.
<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-ui-toggle="collapse" data-ui-target="#acc-body-834" aria-expanded="true" aria-controls="acc-body-834">Leave request · Noah Carter</button> </h2>
<div id="acc-body-834" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-833" data-ui-parent="#acc-832">
<div class="accordion-body">
<p>10 days from Dec 16, 2026. This fast routine brings your work organised at a fair price.</p>
<div class="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-ui-toggle="collapse" data-ui-target="#acc-body-836" aria-expanded="false" aria-controls="acc-body-836">Expense claim · $868.53</button> </h2>
<div id="acc-body-836" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-835" data-ui-parent="#acc-832">
<div class="accordion-body">
<p>This simple team guides results you can measure for teams of every size.</p>
<div class="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-ui-theme="dark" to get a dark accordion on any page.
Our venue booking keeps results you can measure all year round.
Press Ctrl + K to search everywhere.
<div data-ui-theme="dark" class="bg-dark p-4 rounded-md">
<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-ui-toggle="collapse" data-ui-target="#acc-body-839" aria-expanded="true" aria-controls="acc-body-839">Night mode</button> </h2>
<div id="acc-body-839" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-838" data-ui-parent="#acc-837">
<div class="accordion-body">
<p class="mb-0">Our venue booking keeps results you can measure 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-ui-toggle="collapse" data-ui-target="#acc-body-841" aria-expanded="false" aria-controls="acc-body-841">Keyboard shortcuts</button> </h2>
<div id="acc-body-841" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-840" data-ui-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.
Our speaker management makes every detail in view at a fair price.
A smart process connects decisions quicker and clearer in just a few clicks.
This honest launch keeps your work organised with friendly support.
<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-ui-toggle="collapse" data-ui-target="#acc-body-844" aria-expanded="false" aria-controls="acc-body-844"><span class="grow"><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-muted me-4">100%</span></button> </h2>
<div id="acc-body-844" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-843" data-ui-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">Our speaker management makes every detail in view at a fair price.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-845"> <button class="accordion-button" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-846" aria-expanded="true" aria-controls="acc-body-846"><span class="grow">Module 2: Core skills</span><span class="small text-muted me-4">44%</span></button> </h2>
<div id="acc-body-846" class="accordion-collapse ui-collapse show" aria-labelledby="acc-head-845" data-ui-parent="#course-842">
<div class="accordion-body">
<div class="progress mb-2" role="progressbar" aria-label="Module progress" aria-valuenow="44" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
<div class="progress-bar" style="width: 44%;">
</div>
</div>
<p class="mb-0 small">A smart process connects decisions quicker and clearer in just a few clicks.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-847"> <button class="accordion-button collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#acc-body-848" aria-expanded="false" aria-controls="acc-body-848"><span class="grow">Module 3: Final project</span><span class="small text-muted me-4">0%</span></button> </h2>
<div id="acc-body-848" class="accordion-collapse ui-collapse" aria-labelledby="acc-head-847" data-ui-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">This honest launch keeps your work organised with friendly support.</p>
</div>
</div>
</div>
</div>