Web Designer Wall

Snippets Accordion

Bootstrap 5 Accordion with Plus/Minus Toggle Icons

An accordion of four benefit panels with a plus-to-cross toggle, an icon tile and a short explanation in each panel, opening one at a time.

Bootstrap 5 No jQuery Oct 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:720px">
    <div class="text-center mb-4"><span class="wdw-eyebrow">App benefits</span><h1 class="wdw-heading h2 mt-1 mb-0">Why people love it</h1></div>
    <div class="accordion acc-plus" id="benefits">
      <div class="accordion-item wdw-card-sm mb-3">
        <h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#ben0" aria-expanded="true" aria-controls="ben0">App benefit 1: Sync across every device</button></h2>
        <div id="ben0" class="accordion-collapse collapse show" data-bs-parent="#benefits"><div class="accordion-body d-flex gap-3"><span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8 19 13M17.8 6.2 19 5M3 21l9-9M12.2 6.2 11 5"/></svg></span><p class="mb-0 text-body-secondary">Start on your phone and pick up on your laptop. Changes sync in seconds, even if you were offline.</p></div></div>
      </div>
      <div class="accordion-item wdw-card-sm mb-3">
        <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ben1" aria-expanded="false" aria-controls="ben1">App benefit 2: Smart crop and resize</button></h2>
        <div id="ben1" class="accordion-collapse collapse" data-bs-parent="#benefits"><div class="accordion-body d-flex gap-3"><span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2v14a2 2 0 0 0 2 2h14M18 22V8a2 2 0 0 0-2-2H2"/></svg></span><p class="mb-0 text-body-secondary">Drop in an image and get perfect crops for every platform, with focal-point detection that keeps faces in frame.</p></div></div>
      </div>
      <div class="accordion-item wdw-card-sm mb-3">
        <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ben2" aria-expanded="false" aria-controls="ben2">App benefit 3: Automations that run themselves</button></h2>
        <div id="ben2" class="accordion-collapse collapse" data-bs-parent="#benefits"><div class="accordion-body d-flex gap-3"><span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/></svg></span><p class="mb-0 text-body-secondary">Chain triggers and actions into workflows. Reports, reminders and exports happen without you lifting a finger.</p></div></div>
      </div>
      <div class="accordion-item wdw-card-sm mb-3">
        <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ben3" aria-expanded="false" aria-controls="ben3">App benefit 4: Built for long work sessions</button></h2>
        <div id="ben3" class="accordion-collapse collapse" data-bs-parent="#benefits"><div class="accordion-body d-flex gap-3"><span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 8h1a4 4 0 0 1 0 8h-1M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4zM6 2v3M10 2v3M14 2v3"/></svg></span><p class="mb-0 text-body-secondary">Distraction-free modes, scheduled breaks and gentle reminders keep you productive without burning out.</p></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.

Related snippets

More accordion snippets