Accordion
Accordions stack collapsible panels so long content stays short and scannable. They are built on the collapse plugin: link each panel to a parent with data-bs-parent for one-at-a-time behaviour, or leave it out to let several stay open.
1Basic accordion
Three panels where opening one closes the others; the first panel starts open.
We measure success by how many guests come back and tell their friends.
Built for food lovers. Start in minutes and get help from a real person whenever you need it.
We listen first, then build a plan around what you actually need.
<div class="accordion" id="acc-699">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-700"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-701" aria-expanded="true" aria-controls="acc-body-701">What is Koraara Deck?</button> </h2>
<div id="acc-body-701" class="accordion-collapse collapse show" aria-labelledby="acc-head-700" data-bs-parent="#acc-699">
<div class="accordion-body">
<p class="mb-0">We measure success by how many guests come back and tell their friends.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-702"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-703" aria-expanded="false" aria-controls="acc-body-703">Who is it for?</button> </h2>
<div id="acc-body-703" class="accordion-collapse collapse" aria-labelledby="acc-head-702" data-bs-parent="#acc-699">
<div class="accordion-body">
<p class="mb-0">Built for food lovers. 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-704"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-705" aria-expanded="false" aria-controls="acc-body-705">How do I get started?</button> </h2>
<div id="acc-body-705" class="accordion-collapse collapse" aria-labelledby="acc-head-704" data-bs-parent="#acc-699">
<div class="accordion-body">
<p class="mb-0">We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>
</div>2Flush accordion
Removes the outer borders and rounded corners so the accordion sits edge to edge inside a parent.
Our sommelier has paired each dish with wines from small family vineyards.
Thousands of guests already trust us, and we work hard to keep it that way.
We have been feeding this neighbourhood for over a decade, and we still love it.
<div class="accordion accordion-flush border-top border-bottom" id="acc-706">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-707"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-708" aria-expanded="false" aria-controls="acc-body-708">Private events</button> </h2>
<div id="acc-body-708" class="accordion-collapse collapse" aria-labelledby="acc-head-707" data-bs-parent="#acc-706">
<div class="accordion-body">
<p class="mb-0">Our sommelier has paired each dish with wines from small family vineyards.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-709"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-710" aria-expanded="false" aria-controls="acc-body-710">Wine pairing</button> </h2>
<div id="acc-body-710" class="accordion-collapse collapse" aria-labelledby="acc-head-709" data-bs-parent="#acc-706">
<div class="accordion-body">
<p class="mb-0">Thousands of guests 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-711"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-712" aria-expanded="false" aria-controls="acc-body-712">Catering</button> </h2>
<div id="acc-body-712" class="accordion-collapse collapse" aria-labelledby="acc-head-711" data-bs-parent="#acc-706">
<div class="accordion-body">
<p class="mb-0">We have been feeding this neighbourhood for over a decade, and we still love it.</p>
</div>
</div>
</div>
</div>3Always open
Leave out data-bs-parent and each panel opens and closes on its own, so several can be open at once.
Private dining rooms seat up to forty guests for birthdays and business dinners.
Every detail is handled by people who care about getting it right.
Children are always welcome, with a menu made just for them.
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-713"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-714" aria-expanded="true" aria-controls="acc-body-714">Morning session</button> </h2>
<div id="acc-body-714" class="accordion-collapse collapse show" aria-labelledby="acc-head-713">
<div class="accordion-body">
<p class="mb-0">Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-715"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-716" aria-expanded="true" aria-controls="acc-body-716">Afternoon session</button> </h2>
<div id="acc-body-716" class="accordion-collapse collapse show" aria-labelledby="acc-head-715">
<div class="accordion-body">
<p class="mb-0">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-717"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-718" aria-expanded="false" aria-controls="acc-body-718">Evening wrap-up</button> </h2>
<div id="acc-body-718" class="accordion-collapse collapse" aria-labelledby="acc-head-717">
<div class="accordion-body">
<p class="mb-0">Children are always welcome, with a menu made just for them.</p>
</div>
</div>
</div>
</div>4All panels collapsed
Start with everything closed when the headers alone give a good overview.
Our terrace is open from spring to autumn, with heaters for cooler evenings.
Book a table online in seconds, or call us for groups of eight or more.
Our team has done this many times, so you never have to guess.
Every dish is cooked to order, so tell us if you would like anything changed.
<div class="accordion" id="acc-719">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-720"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-721" aria-expanded="false" aria-controls="acc-body-721">Step 1 · Create your account</button> </h2>
<div id="acc-body-721" class="accordion-collapse collapse" aria-labelledby="acc-head-720" data-bs-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-722"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-723" aria-expanded="false" aria-controls="acc-body-723">Step 2 · Invite your team</button> </h2>
<div id="acc-body-723" class="accordion-collapse collapse" aria-labelledby="acc-head-722" data-bs-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">Book a table online in seconds, or call us for groups of eight or more.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-724"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-725" aria-expanded="false" aria-controls="acc-body-725">Step 3 · Connect your tools</button> </h2>
<div id="acc-body-725" class="accordion-collapse collapse" aria-labelledby="acc-head-724" data-bs-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-726"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-727" aria-expanded="false" aria-controls="acc-body-727">Step 4 · Publish</button> </h2>
<div id="acc-body-727" class="accordion-collapse collapse" aria-labelledby="acc-head-726" data-bs-parent="#acc-719">
<div class="accordion-body">
<p class="mb-0">Every dish is cooked to order, so tell us if you would like anything changed.</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. We keep things simple, so you can focus on what matters to you.
Yes, upgrade or downgrade at any time. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
Cooking classes on Saturday mornings teach you our favourite recipes.
Write to support any day of the week. Friendly people answer your questions quickly, by phone, chat or email.
<div class="accordion" id="faq-728">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-729"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-730" aria-expanded="true" aria-controls="acc-body-730"><span class="text-primary me-2"><i class="bi bi-credit-card-fill" aria-hidden="true"></i></span>Which payment methods do you accept?</button> </h2>
<div id="acc-body-730" class="accordion-collapse collapse show" aria-labelledby="acc-head-729" data-bs-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">All major cards and bank transfer. 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-731"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-732" aria-expanded="false" aria-controls="acc-body-732"><span class="text-primary me-2"><i class="bi bi-arrow-repeat" aria-hidden="true"></i></span>Can I change my plan later?</button> </h2>
<div id="acc-body-732" class="accordion-collapse collapse" aria-labelledby="acc-head-731" data-bs-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">Yes, upgrade or downgrade at any time. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-733"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-734" aria-expanded="false" aria-controls="acc-body-734"><span class="text-primary me-2"><i class="bi bi-shield-check" aria-hidden="true"></i></span>Is my data safe?</button> </h2>
<div id="acc-body-734" class="accordion-collapse collapse" aria-labelledby="acc-head-733" data-bs-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">Cooking classes on Saturday mornings teach you our favourite recipes.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-735"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-736" aria-expanded="false" aria-controls="acc-body-736"><span class="text-primary me-2"><i class="bi bi-headset" aria-hidden="true"></i></span>How do I contact support?</button> </h2>
<div id="acc-body-736" class="accordion-collapse collapse" aria-labelledby="acc-head-735" data-bs-parent="#faq-728">
<div class="accordion-body">
<p class="mb-0">Write to support any day of the week. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>6Headers with badges
Count badges pushed to the right show how many items wait inside each panel.
Our team has done this many times, so you never have to guess.
Bread is baked every morning and pasta is rolled by hand in our kitchen.
Every dish is cooked to order, so tell us if you would like anything changed.
<div class="accordion" id="acc-737">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-738"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-739" aria-expanded="false" aria-controls="acc-body-739"><span class="flex-grow-1">Open tickets</span><span class="badge text-bg-danger rounded-pill me-3">3</span></button> </h2>
<div id="acc-body-739" class="accordion-collapse collapse" aria-labelledby="acc-head-738" data-bs-parent="#acc-737">
<div class="accordion-body">
<p class="mb-0">Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-740"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-741" aria-expanded="false" aria-controls="acc-body-741"><span class="flex-grow-1">Waiting for reply</span><span class="badge text-bg-warning rounded-pill me-3">7</span></button> </h2>
<div id="acc-body-741" class="accordion-collapse collapse" aria-labelledby="acc-head-740" data-bs-parent="#acc-737">
<div class="accordion-body">
<p class="mb-0">Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-742"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-743" aria-expanded="false" aria-controls="acc-body-743"><span class="flex-grow-1">Resolved this week</span><span class="badge text-bg-success rounded-pill me-3">23</span></button> </h2>
<div id="acc-body-743" class="accordion-collapse collapse" aria-labelledby="acc-head-742" data-bs-parent="#acc-737">
<div class="accordion-body">
<p class="mb-0">Every dish is cooked to order, so tell us if you would like anything changed.</p>
</div>
</div>
</div>
</div>7Settings panel in a card
A flush accordion inside a card groups account settings into tidy sections.
Account settings
We keep things simple, so you can focus on what matters to you.
<div class="card">
<div class="card-header fw-semibold">
<i class="bi bi-gear-fill" aria-hidden="true"></i> Account settings
</div>
<div class="accordion accordion-flush" id="acc-744">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-747"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-748" aria-expanded="true" aria-controls="acc-body-748">Profile</button> </h2>
<div id="acc-body-748" class="accordion-collapse collapse show" aria-labelledby="acc-head-747" data-bs-parent="#acc-744">
<div class="accordion-body">
<div class="mb-3">
<label class="form-label" for="set-name-745">Display name</label>
<input class="form-control" id="set-name-745" type="text" value="Ravi Silva">
</div>
<button type="button" class="btn btn-primary btn-sm">Save profile</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-749"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-750" aria-expanded="false" aria-controls="acc-body-750">Notifications</button> </h2>
<div id="acc-body-750" class="accordion-collapse collapse" aria-labelledby="acc-head-749" data-bs-parent="#acc-744">
<div class="accordion-body">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="set-switch-746" checked>
<label class="form-check-label" for="set-switch-746">Email me about new activity</label>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-751"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-752" aria-expanded="false" aria-controls="acc-body-752">Privacy</button> </h2>
<div id="acc-body-752" class="accordion-collapse collapse" aria-labelledby="acc-head-751" data-bs-parent="#acc-744">
<div class="accordion-body">
<p class="mb-0 text-body-secondary">We keep things simple, so you can focus on what matters to you.</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 |
|---|---|---|
| Chef's tasting plate | 2 | $43.99 |
| Item | Qty | Total |
|---|---|---|
| Chef's tasting plate | 2 | $48.00 |
| Item | Qty | Total |
|---|---|---|
| Truffle pasta | 3 | $25.00 |
<div class="accordion" id="orders-753">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-754"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-755" aria-expanded="true" aria-controls="acc-body-755"><span class="fw-semibold me-2">#TX-4189</span><span class="text-body-secondary small flex-grow-1">Apr 18, 2026</span><span class="badge text-bg-success me-3">Shipped</span></button> </h2>
<div id="acc-body-755" class="accordion-collapse collapse show" aria-labelledby="acc-head-754" data-bs-parent="#orders-753">
<div class="accordion-body">
<div class="table-responsive">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col" class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chef's tasting plate</td>
<td>2</td>
<td class="text-end">$43.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-bs-toggle="collapse" data-bs-target="#acc-body-757" aria-expanded="false" aria-controls="acc-body-757"><span class="fw-semibold me-2">#TX-1491</span><span class="text-body-secondary small flex-grow-1">Jul 24, 2026</span><span class="badge text-bg-warning me-3">Processing</span></button> </h2>
<div id="acc-body-757" class="accordion-collapse collapse" aria-labelledby="acc-head-756" data-bs-parent="#orders-753">
<div class="accordion-body">
<div class="table-responsive">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col" class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chef's tasting plate</td>
<td>2</td>
<td class="text-end">$48.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-bs-toggle="collapse" data-bs-target="#acc-body-759" aria-expanded="false" aria-controls="acc-body-759"><span class="fw-semibold me-2">#PO-7540</span><span class="text-body-secondary small flex-grow-1">Oct 2, 2025</span><span class="badge text-bg-secondary me-3">Cancelled</span></button> </h2>
<div id="acc-body-759" class="accordion-collapse collapse" aria-labelledby="acc-head-758" data-bs-parent="#orders-753">
<div class="accordion-body">
<div class="table-responsive">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col" class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Truffle pasta</td>
<td>3</td>
<td class="text-end">$25.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>9Sidebar navigation
Collapsible menu sections with list groups as bodies, a common admin sidebar pattern.
<div class="accordion ca-acc-nav" id="nav-760" style="max-width: 320px;">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-761"> <button class="accordion-button py-2" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-762" aria-expanded="true" aria-controls="acc-body-762"><i class="bi bi-speedometer2" aria-hidden="true"></i><span class="ms-2">Dashboard</span></button> </h2>
<div id="acc-body-762" class="accordion-collapse collapse show" aria-labelledby="acc-head-761" data-bs-parent="#nav-760">
<div class="accordion-body">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">Overview</a><a href="#" class="list-group-item list-group-item-action">Reports</a><a href="#" class="list-group-item list-group-item-action">Live view</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-763"> <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-764" aria-expanded="false" aria-controls="acc-body-764"><i class="bi bi-people-fill" aria-hidden="true"></i><span class="ms-2">Customers</span></button> </h2>
<div id="acc-body-764" class="accordion-collapse collapse" aria-labelledby="acc-head-763" data-bs-parent="#nav-760">
<div class="accordion-body">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">All customers</a><a href="#" class="list-group-item list-group-item-action">Segments</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-765"> <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-766" aria-expanded="false" aria-controls="acc-body-766"><i class="bi bi-box-seam-fill" aria-hidden="true"></i><span class="ms-2">Catalogue</span></button> </h2>
<div id="acc-body-766" class="accordion-collapse collapse" aria-labelledby="acc-head-765" data-bs-parent="#nav-760">
<div class="accordion-body">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">Products</a><a href="#" class="list-group-item list-group-item-action">Categories</a><a href="#" class="list-group-item list-group-item-action">Inventory</a>
</div>
</div>
</div>
</div>
</div>10Checkout steps
A checkout split into steps, each holding a small form; a classic one-page checkout layout.
Order total: $83.01
<div class="accordion" id="checkout-767">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-773"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-774" aria-expanded="true" aria-controls="acc-body-774"><span class="badge rounded-pill text-bg-primary me-2">1</span>Shipping address</button> </h2>
<div id="acc-body-774" class="accordion-collapse collapse show" aria-labelledby="acc-head-773" data-bs-parent="#checkout-767">
<div class="accordion-body">
<div class="row g-2">
<div class="col-12">
<label class="form-label" for="co-name-768">Full name</label>
<input class="form-control" id="co-name-768" type="text" placeholder="Aria Moreau">
</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="73 Maple Avenue">
</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="Oslo">
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-775"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-776" aria-expanded="false" aria-controls="acc-body-776"><span class="badge rounded-pill text-bg-secondary me-2">2</span>Delivery method</button> </h2>
<div id="acc-body-776" class="accordion-collapse collapse" aria-labelledby="acc-head-775" data-bs-parent="#checkout-767">
<div class="accordion-body">
<div class="form-check">
<input class="form-check-input" type="radio" name="co-ship-771" id="co-ship-771" checked>
<label class="form-check-label" for="co-ship-771">Standard (3-5 days) · Free</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="co-ship-771" id="co-ship-772">
<label class="form-check-label" for="co-ship-772">Express (1-2 days) · $11.87</label>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-777"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-778" aria-expanded="false" aria-controls="acc-body-778"><span class="badge rounded-pill text-bg-secondary me-2">3</span>Review and pay</button> </h2>
<div id="acc-body-778" class="accordion-collapse collapse" aria-labelledby="acc-head-777" data-bs-parent="#checkout-767">
<div class="accordion-body">
<p>Order total: <strong>$83.01</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.
Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
View project
Private dining rooms seat up to forty guests for birthdays and business dinners.
<div class="accordion" id="acc-779">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-780"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-781" aria-expanded="true" aria-controls="acc-body-781">The story of our wood-fired oven</button> </h2>
<div id="acc-body-781" class="accordion-collapse collapse show" aria-labelledby="acc-head-780" data-bs-parent="#acc-779">
<div class="accordion-body">
<div class="row g-3 align-items-center">
<div class="col-sm-4">
<img src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1200&h=800&q=70" class="img-fluid rounded" alt="Project preview">
</div>
<div class="col-sm-8">
<p class="mb-2">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
<a href="#" class="btn btn-outline-primary btn-sm">View project</a>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-782"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-783" aria-expanded="false" aria-controls="acc-body-783">Five things we learned this year</button> </h2>
<div id="acc-body-783" class="accordion-collapse collapse" aria-labelledby="acc-head-782" data-bs-parent="#acc-779">
<div class="accordion-body">
<div class="row g-3 align-items-center">
<div class="col-sm-4">
<img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?auto=format&fit=crop&w=1200&h=800&q=70" class="img-fluid rounded" alt="Project preview">
</div>
<div class="col-sm-8">
<p class="mb-0">Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
</div>
</div>
</div>
</div>
</div>
</div>12Tinted active header
A little custom CSS tints the open header with the theme primary colour.
We measure success by how many guests come back and tell their friends.
Our sommelier has paired each dish with wines from small family vineyards.
Start in minutes and get help from a real person whenever you need it.
<div class="accordion ca-acc-tint" id="acc-784">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-785"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-786" aria-expanded="true" aria-controls="acc-body-786">Design</button> </h2>
<div id="acc-body-786" class="accordion-collapse collapse show" aria-labelledby="acc-head-785" data-bs-parent="#acc-784">
<div class="accordion-body">
<p class="mb-0">We measure success by how many guests come back and tell their friends.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-787"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-788" aria-expanded="false" aria-controls="acc-body-788">Development</button> </h2>
<div id="acc-body-788" class="accordion-collapse collapse" aria-labelledby="acc-head-787" data-bs-parent="#acc-784">
<div class="accordion-body">
<p class="mb-0">Our sommelier has paired each dish with wines from small family vineyards.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-789"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-790" aria-expanded="false" aria-controls="acc-body-790">Launch</button> </h2>
<div id="acc-body-790" class="accordion-collapse collapse" aria-labelledby="acc-head-789" data-bs-parent="#acc-784">
<div class="accordion-body">
<p class="mb-0">Start in minutes and get help from a real person whenever you need it.</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.
Children are always welcome, with a menu made just for them.
Order for pickup or delivery and enjoy the same dishes at home.
<div class="accordion" id="acc-791">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-797"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-798" aria-expanded="true" aria-controls="acc-body-798">Chapter 1 · Foundations</button> </h2>
<div id="acc-body-798" class="accordion-collapse collapse show" aria-labelledby="acc-head-797" data-bs-parent="#acc-791">
<div class="accordion-body">
<div class="accordion" id="acc-inner-792">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-793"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-794" aria-expanded="false" aria-controls="acc-body-794">Lesson 1.1</button> </h2>
<div id="acc-body-794" class="accordion-collapse collapse" aria-labelledby="acc-head-793" data-bs-parent="#acc-inner-792">
<div class="accordion-body">
<p class="mb-0">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-bs-toggle="collapse" data-bs-target="#acc-body-796" aria-expanded="false" aria-controls="acc-body-796">Lesson 1.2</button> </h2>
<div id="acc-body-796" class="accordion-collapse collapse" aria-labelledby="acc-head-795" data-bs-parent="#acc-inner-792">
<div class="accordion-body">
<p class="mb-0">Children are always welcome, with a menu made just for them.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-799"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-800" aria-expanded="false" aria-controls="acc-body-800">Chapter 2 · Going further</button> </h2>
<div id="acc-body-800" class="accordion-collapse collapse" aria-labelledby="acc-head-799" data-bs-parent="#acc-791">
<div class="accordion-body">
<p class="mb-0">Order for pickup or delivery and enjoy the same dishes at home.</p>
</div>
</div>
</div>
</div>14Compact accordion
Smaller padding and text for dense side panels and filters.
Drinks, Specials
& up
<div class="accordion ca-acc-sm" id="acc-801" style="max-width: 360px;">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-804"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-805" aria-expanded="true" aria-controls="acc-body-805">Price</button> </h2>
<div id="acc-body-805" class="accordion-collapse collapse show" aria-labelledby="acc-head-804" data-bs-parent="#acc-801">
<div class="accordion-body">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-802">
<label class="form-check-label" for="chk-802">Under $50</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="chk-803">
<label class="form-check-label" for="chk-803">$50 – $200</label>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-806"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-807" aria-expanded="false" aria-controls="acc-body-807">Category</button> </h2>
<div id="acc-body-807" class="accordion-collapse collapse" aria-labelledby="acc-head-806" data-bs-parent="#acc-801">
<div class="accordion-body">
<p class="mb-0">Drinks, Specials</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-808"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-809" aria-expanded="false" aria-controls="acc-body-809">Rating</button> </h2>
<div id="acc-body-809" class="accordion-collapse collapse" aria-labelledby="acc-head-808" data-bs-parent="#acc-801">
<div class="accordion-body">
<p class="mb-0 text-warning"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i> & up</p>
</div>
</div>
</div>
</div>15Two-column pricing FAQ
Two independent accordions side by side fill wide screens and stack on phones.
Yes, 24 days with every feature. Our terrace is open from spring to autumn, with heaters for cooler evenings.
Our menu changes with the seasons and the best produce from nearby farms.
Yearly billing saves 19%. Thousands of guests already trust us, and we work hard to keep it that way.
Book a table online in seconds, or call us for groups of eight or more.
<div class="row g-3">
<div class="col-md-6">
<div class="accordion" id="faq-810">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-812"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-813" aria-expanded="false" aria-controls="acc-body-813">Is there a free trial?</button> </h2>
<div id="acc-body-813" class="accordion-collapse collapse" aria-labelledby="acc-head-812" data-bs-parent="#faq-810">
<div class="accordion-body">
<p class="mb-0">Yes, 24 days with every feature. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-814"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-815" aria-expanded="false" aria-controls="acc-body-815">Do you offer refunds?</button> </h2>
<div id="acc-body-815" class="accordion-collapse collapse" aria-labelledby="acc-head-814" data-bs-parent="#faq-810">
<div class="accordion-body">
<p class="mb-0">Our menu changes with the seasons and the best produce from nearby farms.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion" id="faq-811">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-816"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-817" aria-expanded="false" aria-controls="acc-body-817">Can I pay yearly?</button> </h2>
<div id="acc-body-817" class="accordion-collapse collapse" aria-labelledby="acc-head-816" data-bs-parent="#faq-811">
<div class="accordion-body">
<p class="mb-0">Yearly billing saves 19%. Thousands of guests 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-818"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-819" aria-expanded="false" aria-controls="acc-body-819">Are there discounts for nonprofits?</button> </h2>
<div id="acc-body-819" class="accordion-collapse collapse" aria-labelledby="acc-head-818" data-bs-parent="#faq-811">
<div class="accordion-body">
<p class="mb-0">Book a table online in seconds, or call us for groups of eight or more.</p>
</div>
</div>
</div>
</div>
</div>
</div>16Team directory
Avatars and roles in the headers; contact details appear when a person is opened.
Kyoto · lea.patel@example.com
Cape Town · ella.lindqvist@example.com
Prague · owen.fischer@example.com
<div class="accordion" id="team-820">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-821"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-822" aria-expanded="false" aria-controls="acc-body-822"><img src="../assets/img/avatar-2.svg" alt="Lea Patel" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="ms-3"><span class="d-block fw-semibold">Lea Patel</span><span class="small text-body-secondary">Backend Engineer</span></span></button> </h2>
<div id="acc-body-822" class="accordion-collapse collapse" aria-labelledby="acc-head-821" data-bs-parent="#team-820">
<div class="accordion-body">
<p class="mb-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Kyoto · <i class="bi bi-envelope-fill" aria-hidden="true"></i> lea.patel@example.com</p>
<button type="button" class="btn btn-sm btn-outline-primary">Send message</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-823"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-824" aria-expanded="false" aria-controls="acc-body-824"><img src="../assets/img/avatar-11.svg" alt="Ella Lindqvist" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="ms-3"><span class="d-block fw-semibold">Ella Lindqvist</span><span class="small text-body-secondary">Data Analyst</span></span></button> </h2>
<div id="acc-body-824" class="accordion-collapse collapse" aria-labelledby="acc-head-823" data-bs-parent="#team-820">
<div class="accordion-body">
<p class="mb-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Cape Town · <i class="bi bi-envelope-fill" aria-hidden="true"></i> ella.lindqvist@example.com</p>
<button type="button" class="btn btn-sm btn-outline-primary">Send message</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-825"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-826" aria-expanded="false" aria-controls="acc-body-826"><img src="../assets/img/avatar-3.svg" alt="Owen Fischer" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="ms-3"><span class="d-block fw-semibold">Owen Fischer</span><span class="small text-body-secondary">Art Director</span></span></button> </h2>
<div id="acc-body-826" class="accordion-collapse collapse" aria-labelledby="acc-head-825" data-bs-parent="#team-820">
<div class="accordion-body">
<p class="mb-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Prague · <i class="bi bi-envelope-fill" aria-hidden="true"></i> owen.fischer@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.
- NewFast delivery
- ImprovedLocal ingredients
- FixedSeveral layout issues on small screens
- FixedExport now keeps the column order
<div class="accordion" id="changelog-827">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-828"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-829" aria-expanded="true" aria-controls="acc-body-829"><span class="fw-semibold me-2">v4.9.0</span><span class="badge text-bg-primary">Latest</span></button> </h2>
<div id="acc-body-829" class="accordion-collapse collapse show" aria-labelledby="acc-head-828" data-bs-parent="#changelog-827">
<div class="accordion-body">
<ul class="mb-0">
<li><span class="badge text-bg-success me-1">New</span>Fast delivery</li>
<li><span class="badge text-bg-info me-1">Improved</span>Local ingredients</li>
<li><span class="badge text-bg-danger me-1">Fixed</span>Several layout issues on small screens</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-830"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-831" aria-expanded="false" aria-controls="acc-body-831"><span class="fw-semibold me-2">v2.9.2</span><span class="small text-body-secondary">Jul 1, 2026</span></button> </h2>
<div id="acc-body-831" class="accordion-collapse collapse" aria-labelledby="acc-head-830" data-bs-parent="#changelog-827">
<div class="accordion-body">
<ul class="mb-0">
<li><span class="badge text-bg-danger me-1">Fixed</span>Export now keeps the column order</li>
</ul>
</div>
</div>
</div>
</div>18Actions inside panels
Panels that end with buttons, useful for reviewing and approving requests.
10 days from Dec 19, 2026. We listen first, then build a plan around what you actually need.
Cooking classes on Saturday mornings teach you our favourite recipes.
<div class="accordion" id="acc-832">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-833"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-834" aria-expanded="true" aria-controls="acc-body-834">Leave request · Nora Hughes</button> </h2>
<div id="acc-body-834" class="accordion-collapse collapse show" aria-labelledby="acc-head-833" data-bs-parent="#acc-832">
<div class="accordion-body">
<p>10 days from Dec 19, 2026. We listen first, then build a plan around what you actually need.</p>
<div class="d-flex gap-2">
<button type="button" class="btn btn-success btn-sm"><i class="bi bi-check-lg" aria-hidden="true"></i> Approve</button>
<button type="button" class="btn btn-outline-danger btn-sm"><i class="bi bi-x-lg" aria-hidden="true"></i> Decline</button>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-835"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-836" aria-expanded="false" aria-controls="acc-body-836">Expense claim · $812.98</button> </h2>
<div id="acc-body-836" class="accordion-collapse collapse" aria-labelledby="acc-head-835" data-bs-parent="#acc-832">
<div class="accordion-body">
<p>Cooking classes on Saturday mornings teach you our favourite recipes.</p>
<div class="d-flex gap-2">
<button type="button" class="btn btn-success btn-sm">Approve</button>
<button type="button" class="btn btn-outline-secondary btn-sm">Ask for receipt</button>
</div>
</div>
</div>
</div>
</div>19Dark accordion
Wrap it in data-bs-theme="dark" to get a dark accordion on any page.
Clear prices, honest advice and no surprises along the way.
Press Ctrl + K to search everywhere.
<div data-bs-theme="dark" class="bg-dark p-3 rounded">
<div class="accordion" id="acc-837">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-838"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-839" aria-expanded="true" aria-controls="acc-body-839">Night mode</button> </h2>
<div id="acc-body-839" class="accordion-collapse collapse show" aria-labelledby="acc-head-838" data-bs-parent="#acc-837">
<div class="accordion-body">
<p class="mb-0">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-840"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-841" aria-expanded="false" aria-controls="acc-body-841">Keyboard shortcuts</button> </h2>
<div id="acc-body-841" class="accordion-collapse collapse" aria-labelledby="acc-head-840" data-bs-parent="#acc-837">
<div class="accordion-body">
<p class="mb-0">Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to search everywhere.</p>
</div>
</div>
</div>
</div>
</div>20Course modules with progress
Each module shows its completion in the header and a progress bar inside.
We have been feeding this neighbourhood for over a decade, and we still love it.
Friendly people answer your questions quickly, by phone, chat or email.
Every detail is handled by people who care about getting it right.
<div class="accordion" id="course-842">
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-843"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-844" aria-expanded="false" aria-controls="acc-body-844"><span class="flex-grow-1"><span class="text-success me-2"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Module 1: Getting started</span><span class="small text-body-secondary me-3">100%</span></button> </h2>
<div id="acc-body-844" class="accordion-collapse collapse" aria-labelledby="acc-head-843" data-bs-parent="#course-842">
<div class="accordion-body">
<div class="progress mb-2" role="progressbar" aria-label="Module progress" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
<div class="progress-bar" style="width: 100%;">
</div>
</div>
<p class="mb-0 small">We have been feeding this neighbourhood for over a decade, and we still love it.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="acc-head-845"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-846" aria-expanded="true" aria-controls="acc-body-846"><span class="flex-grow-1">Module 2: Core skills</span><span class="small text-body-secondary me-3">53%</span></button> </h2>
<div id="acc-body-846" class="accordion-collapse collapse show" aria-labelledby="acc-head-845" data-bs-parent="#course-842">
<div class="accordion-body">
<div class="progress mb-2" role="progressbar" aria-label="Module progress" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
<div class="progress-bar" style="width: 53%;">
</div>
</div>
<p class="mb-0 small">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-847"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-body-848" aria-expanded="false" aria-controls="acc-body-848"><span class="flex-grow-1">Module 3: Final project</span><span class="small text-body-secondary me-3">0%</span></button> </h2>
<div id="acc-body-848" class="accordion-collapse collapse" aria-labelledby="acc-head-847" data-bs-parent="#course-842">
<div class="accordion-body">
<div class="progress mb-2" role="progressbar" aria-label="Module progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
<div class="progress-bar" style="width: 0%;">
</div>
</div>
<p class="mb-0 small">Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>