Web Designer Wall

Snippets Accordion

Bootstrap 5 Accordion with Plus Minus Icons

An FAQ accordion with plus and minus indicators where opening one answer closes the others, set beside a short support intro.

Bootstrap 5 No jQuery Sep 2020 3.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1000px">
    <div class="row g-4 g-lg-5 align-items-center">
      <div class="col-lg-5">
        <span class="wdw-eyebrow mb-2">FAQ</span>
        <h2 class="wdw-heading display-6 mb-3">Questions, answered.</h2>
        <p class="wdw-muted mb-4">Everything you need to know before you start. Can't find it? Our team replies fast.</p>
        <a href="#" class="btn btn-primary rounded-pill px-4">Talk to support</a>
      </div>
      <div class="col-lg-7">
        <div class="accordion fq-acc wdw-card overflow-hidden" id="fqAcc">
          <div class="accordion-item">
            <h3 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#fq1" aria-expanded="true" aria-controls="fq1">How do I get started?</button>
            </h3>
            <div id="fq1" class="accordion-collapse collapse show" data-bs-parent="#fqAcc">
              <div class="accordion-body wdw-muted">Create a workspace, invite your team, and import your first project in under five minutes. Templates are available for every common workflow, so you never start from a blank page.</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="#fq2" aria-expanded="false" aria-controls="fq2">Can I change my plan later?</button>
            </h3>
            <div id="fq2" class="accordion-collapse collapse" data-bs-parent="#fqAcc">
              <div class="accordion-body wdw-muted">Yes. Upgrade, downgrade or cancel at any time from billing settings. Changes are prorated automatically, and unused credit carries over to your next invoice.</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="#fq3" aria-expanded="false" aria-controls="fq3">Is my data secure?</button>
            </h3>
            <div id="fq3" class="accordion-collapse collapse" data-bs-parent="#fqAcc">
              <div class="accordion-body wdw-muted">All data is encrypted in transit and at rest, backed up every hour, and stored in region-locked data centres. Two-factor sign-in and audit logs are included on every plan.</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="#fq4" aria-expanded="false" aria-controls="fq4">How do I contact support?</button>
            </h3>
            <div id="fq4" class="accordion-collapse collapse" data-bs-parent="#fqAcc">
              <div class="accordion-body wdw-muted">Message us from the help widget any time. Most questions are answered within an hour on weekdays, and paid plans include priority chat and email support.</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