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.
Set up in an afternoon, connect the tools you use and invite your team.
Built for growing teams. Start free, upgrade when you grow and cancel any time with one click.
Every detail is handled by people who care about getting it right.
<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 Halo Works?</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">Set up in an afternoon, connect the tools you use and invite your team.</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 growing teams. Start free, upgrade when you grow and cancel any time with one click.</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">Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>2Flush accordion
Removes the outer borders and rounded corners so the accordion sits edge to edge inside a parent.
We measure success by how many customers come back and tell their friends.
Teams report saving around five hours a week after the first month.
Thousands of customers already trust us, and we work hard to keep it that way.
<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">Workflow automation</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">We measure success by how many customers come back and tell their friends.</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">Team analytics</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">Teams report saving around five hours a week after the first month.</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">Single sign-on</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">Thousands of customers already trust us, and we work hard to keep it that way.</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.
Clear reports turn weekly numbers into decisions in minutes, not days.
Every update lands in one place, so nothing gets lost in email threads.
Clear prices, honest advice and no surprises along the way.
<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">Clear reports turn weekly numbers into decisions in minutes, not days.</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">Every update lands in one place, so nothing gets lost in email threads.</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">Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
</div>4All panels collapsed
Start with everything closed when the headers alone give a good overview.
Your data is encrypted, backed up daily and hosted in the region you choose.
Onboarding guides and live chat help new colleagues get going on day one.
We keep things simple, so you can focus on what matters to you.
Plan projects, track progress and share updates without another status meeting.
<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">Your data is encrypted, backed up daily and hosted in the region you choose.</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">Onboarding guides and live chat help new colleagues get going on day one.</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">We keep things simple, so you can focus on what matters to you.</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">Plan projects, track progress and share updates without another status meeting.</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. Real-time dashboards show what is on track and what needs attention.
Yes, upgrade or downgrade at any time. Granular roles keep sensitive work private while everyone else stays informed.
Automations take care of the repetitive steps, so people can focus on real work.
Write to support any day of the week. Our team has done this many times, so you never have to guess.
<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-ink me-2"><i class="bi bi-credit-card" 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. Real-time dashboards show what is on track and what needs attention.</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-ink 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. Granular roles keep sensitive work private while everyone else stays informed.</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-ink 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">Automations take care of the repetitive steps, so people can focus on real work.</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-ink 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. Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
</div>6Headers with badges
Count badges pushed to the right show how many items wait inside each panel.
We measure success by how many customers come back and tell their friends.
Friendly people answer your questions quickly, by phone, chat or email.
Start free, upgrade when you grow and cancel any time with one click.
<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">We measure success by how many customers come back and tell their friends.</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">6</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">Friendly people answer your questions quickly, by phone, chat or email.</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">59</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">Start free, upgrade when you grow and cancel any time with one click.</p>
</div>
</div>
</div>
</div>7Settings panel in a card
A flush accordion inside a card groups account settings into tidy sections.
Account settings
Onboarding guides and live chat help new colleagues get going on day one.
<div class="card">
<div class="card-header font-semibold">
<i class="bi bi-gear" 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="Freya 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">Onboarding guides and live chat help new colleagues get going on day one.</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 |
|---|---|---|
| Priority support | 1 | $27.99 |
| Item | Qty | Total |
|---|---|---|
| Analytics add-on | 1 | $12.00 |
| Item | Qty | Total |
|---|---|---|
| Priority support | 1 | $30.99 |
<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">#INV-9152</span><span class="text-muted small grow">Dec 2, 2025</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>Priority support</td>
<td>1</td>
<td class="text-end">$27.99</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">#ORD-4711</span><span class="text-muted small grow">May 19, 2026</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>Analytics add-on</td>
<td>1</td>
<td class="text-end">$12.00</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">#ORD-6258</span><span class="text-muted small grow">Jul 18, 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>Priority support</td>
<td>1</td>
<td class="text-end">$30.99</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" 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" 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: $58.62
<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="Mia Kowalski">
</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="256 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="Copenhagen">
</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) · $15.04</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>$58.62</strong></p>
<button type="button" class="btn btn-success"><i class="bi bi-lock" 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.
Granular roles keep sensitive work private while everyone else stays informed.
View project
Our open API and ready-made integrations fit into the stack you already have.
<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 remote teams keep projects on track</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="https://images.unsplash.com/photo-1702301266409-ed1bfe210971?auto=format&fit=crop&w=1200&h=800&q=70" class="img-fluid rounded-md" alt="Project preview">
</div>
<div class="col-sm-8">
<p class="mb-2">Granular roles keep sensitive work private while everyone else stays informed.</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">Five things we learned this year</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="https://images.unsplash.com/photo-1690264350953-79ef8acbd562?auto=format&fit=crop&w=1200&h=800&q=70" class="img-fluid rounded-md" alt="Project preview">
</div>
<div class="col-sm-8">
<p class="mb-0">Our open API and ready-made integrations fit into the stack you already have.</p>
</div>
</div>
</div>
</div>
</div>
</div>12Tinted active header
A little custom CSS tints the open header with the theme primary colour.
Automations take care of the repetitive steps, so people can focus on real work.
Clear prices, honest advice and no surprises along the way.
We listen first, then build a plan around what you actually need.
<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">Automations take care of the repetitive steps, so people can focus on real work.</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">Clear prices, honest advice and no surprises along the way.</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">We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>
</div>13Nested accordion
An accordion inside a panel for two-level content such as chapters and lessons.
Every detail is handled by people who care about getting it right.
Plan projects, track progress and share updates without another status meeting.
Every update lands in one place, so nothing gets lost in email threads.
<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">Every detail is handled by people who care about getting it right.</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">Plan projects, track progress and share updates without another status meeting.</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">Every update lands in one place, so nothing gets lost in email threads.</p>
</div>
</div>
</div>
</div>14Compact accordion
Smaller padding and text for dense side panels and filters.
Marketing, Product
& 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">Marketing, Product</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-emphasis"><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" 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, 17 days with every feature. Thousands of customers already trust us, and we work hard to keep it that way.
Set up in an afternoon, connect the tools you use and invite your team.
Yearly billing saves 25%. We keep things simple, so you can focus on what matters to you.
Real-time dashboards show what is on track and what needs attention.
<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, 17 days with every feature. Thousands of customers already trust us, and we work hard to keep it that way.</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">Set up in an afternoon, connect the tools you use and invite your team.</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 25%. We keep things simple, so you can focus on what matters to you.</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">Real-time dashboards show what is on track and what needs attention.</p>
</div>
</div>
</div>
</div>
</div>
</div>16Team directory
Avatars and roles in the headers; contact details appear when a person is opened.
Austin · amara.varga@example.com
Edinburgh · omar.haddad@example.com
Valencia · ruby.carter@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-10.svg" alt="Amara Varga" class="rounded-full shrink-0" width="36" height="36"><span class="ms-4"><span class="block font-semibold">Amara Varga</span><span class="small text-muted">Operations Manager</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" aria-hidden="true"></i> Austin · <i class="bi bi-envelope" aria-hidden="true"></i> amara.varga@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-8.svg" alt="Omar Haddad" class="rounded-full shrink-0" width="36" height="36"><span class="ms-4"><span class="block font-semibold">Omar Haddad</span><span class="small text-muted">Data Analyst</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" aria-hidden="true"></i> Edinburgh · <i class="bi bi-envelope" aria-hidden="true"></i> omar.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-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="Ruby Carter" class="rounded-full shrink-0" width="36" height="36"><span class="ms-4"><span class="block font-semibold">Ruby Carter</span><span class="small text-muted">Frontend Engineer</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" aria-hidden="true"></i> Valencia · <i class="bi bi-envelope" aria-hidden="true"></i> ruby.carter@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.
- New99.99% uptime
- ImprovedDark mode
- 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">v3.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>99.99% uptime</li>
<li><span class="badge text-bg-info me-1">Improved</span>Dark mode</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">Dec 21, 2025</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 Nov 26, 2026. Our team has done this many times, so you never have to guess.
Clear reports turn weekly numbers into decisions in minutes, not days.
<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 Silva</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 Nov 26, 2026. Our team has done this many times, so you never have to guess.</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 · $571.13</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>Clear reports turn weekly numbers into decisions in minutes, not days.</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.
Your data is encrypted, backed up daily and hosted in the region you choose.
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">Your data is encrypted, backed up daily and hosted in the region you choose.</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.
Start in minutes and get help from a real person whenever you need it.
Teams report saving around five hours a week after the first month.
We measure success by how many customers come back and tell their friends.
<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-emphasis 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">Start in minutes and get help from a real person whenever you need it.</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">76%</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="76" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
<div class="progress-bar" style="width: 76%;">
</div>
</div>
<p class="mb-0 small">Teams report saving around five hours a week after the first month.</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">We measure success by how many customers come back and tell their friends.</p>
</div>
</div>
</div>
</div>