Web Designer Wall

Snippets Accordion

Bootstrap 5 Accordion Layouts and Styles

Three accordion treatments side by side: a flush divider list, separated rounded cards and a numbered list, each opening one panel at a time.

Bootstrap 5 No jQuery Apr 2020 1.8K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1100px">
    <div class="text-center mb-5"><span class="wdw-eyebrow">Components</span><h1 class="h2 wdw-heading mt-1 mb-2">Accordion layouts</h1><p class="wdw-muted mb-0">Three ways to present collapsible content, one markup.</p></div>
    <div class="row g-4">
      <div class="col-lg-4"><div class="wdw-card h-100 p-4"><span class="wdw-eyebrow mb-3">Style 1 · Flush</span><div class="accordion acc-flush" id="accA">
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accA1" aria-expanded="true" aria-controls="accA1">How do I reset my password?</button></h3>
    <div id="accA1" class="accordion-collapse collapse show" data-bs-parent="#accA"><div class="accordion-body">Open Settings, choose Security and select Reset password. We will email you a secure link that expires after one hour.</div></div></div>
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accA2" aria-expanded="false" aria-controls="accA2">Can I invite teammates?</button></h3>
    <div id="accA2" class="accordion-collapse collapse" data-bs-parent="#accA"><div class="accordion-body">Yes. Add as many teammates as your plan allows from the Members page and assign each a role.</div></div></div>
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accA3" aria-expanded="false" aria-controls="accA3">Where can I find my invoices?</button></h3>
    <div id="accA3" class="accordion-collapse collapse" data-bs-parent="#accA"><div class="accordion-body">Every invoice is stored under Billing and can be downloaded as a PDF at any time.</div></div></div>
</div></div></div>
      <div class="col-lg-4"><div class="wdw-card h-100 p-4"><span class="wdw-eyebrow mb-3">Style 2 · Separated</span><div class="accordion acc-split" id="accB">
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accB1" aria-expanded="true" aria-controls="accB1">How do I reset my password?</button></h3>
    <div id="accB1" class="accordion-collapse collapse show" data-bs-parent="#accB"><div class="accordion-body">Open Settings, choose Security and select Reset password. We will email you a secure link that expires after one hour.</div></div></div>
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accB2" aria-expanded="false" aria-controls="accB2">Can I invite teammates?</button></h3>
    <div id="accB2" class="accordion-collapse collapse" data-bs-parent="#accB"><div class="accordion-body">Yes. Add as many teammates as your plan allows from the Members page and assign each a role.</div></div></div>
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accB3" aria-expanded="false" aria-controls="accB3">Where can I find my invoices?</button></h3>
    <div id="accB3" class="accordion-collapse collapse" data-bs-parent="#accB"><div class="accordion-body">Every invoice is stored under Billing and can be downloaded as a PDF at any time.</div></div></div>
</div></div></div>
      <div class="col-lg-4"><div class="wdw-card h-100 p-4"><span class="wdw-eyebrow mb-3">Style 3 · Numbered</span><div class="accordion acc-num" id="accC">
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accC1" aria-expanded="true" aria-controls="accC1"><span class="acc-n">01</span>How do I reset my password?</button></h3>
    <div id="accC1" class="accordion-collapse collapse show" data-bs-parent="#accC"><div class="accordion-body">Open Settings, choose Security and select Reset password. We will email you a secure link that expires after one hour.</div></div></div>
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accC2" aria-expanded="false" aria-controls="accC2"><span class="acc-n">02</span>Can I invite teammates?</button></h3>
    <div id="accC2" class="accordion-collapse collapse" data-bs-parent="#accC"><div class="accordion-body">Yes. Add as many teammates as your plan allows from the Members page and assign each a role.</div></div></div>
  <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accC3" aria-expanded="false" aria-controls="accC3"><span class="acc-n">03</span>Where can I find my invoices?</button></h3>
    <div id="accC3" class="accordion-collapse collapse" data-bs-parent="#accC"><div class="accordion-body">Every invoice is stored under Billing and can be downloaded as a PDF at any time.</div></div></div>
</div></div></div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More accordion snippets