Web Designer Wall

Snippets Accordion

Bootstrap 5 FAQ Accordion with Contact Card

An accessible FAQ accordion where one answer opens at a time, framed with a help-centre heading and a contact card for anything not covered.

Bootstrap 5 No jQuery Jul 2019 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1080px">
    <div class="row g-4 align-items-stretch">
      <div class="col-lg-7">
        <span class="wdw-eyebrow">Help center</span>
        <h1 class="wdw-heading display-6 mt-1 mb-2">Frequently asked questions</h1>
        <p class="wdw-muted mb-4">Quick answers about signing up, scheduling and billing.</p>
        <div class="accordion faq d-grid gap-2" id="faq">
        <div class="accordion-item">
          <h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1"><span class="faq-q">Why am I not receiving the signup email?</span><span class="wdw-icon faq-toggle" aria-hidden="true"></span></button></h3>
          <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faq"><div class="accordion-body wdw-muted">Check your junk or spam folder first, the confirmation usually lands there. If it is not there after ten minutes, request a new one from the sign-in 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="#faq2" aria-expanded="false" aria-controls="faq2"><span class="faq-q">Why are posts not published at the time I chose?</span><span class="wdw-icon faq-toggle" aria-hidden="true"></span></button></h3>
          <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body wdw-muted">Scheduling follows the time zone set in your profile. Pick your own zone under Settings and re-save any queued posts.</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="#faq3" aria-expanded="false" aria-controls="faq3"><span class="faq-q">How does payment work?</span><span class="wdw-icon faq-toggle" aria-hidden="true"></span></button></h3>
          <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body wdw-muted">Plans are billed monthly by card. You can switch or cancel at any time and keep access until the end of the billing period.</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="#faq4" aria-expanded="false" aria-controls="faq4"><span class="faq-q">Is the service safe to use?</span><span class="wdw-icon faq-toggle" aria-hidden="true"></span></button></h3>
          <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body wdw-muted">Yes. Connections are encrypted, we never store your password, and you can revoke access whenever you like.</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="#faq5" aria-expanded="false" aria-controls="faq5"><span class="faq-q">Can I invite my team?</span><span class="wdw-icon faq-toggle" aria-hidden="true"></span></button></h3>
          <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body wdw-muted">Yes. Add teammates from Settings, choose a role for each, and they get an invitation by email. Seats are prorated on 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="#faq6" aria-expanded="false" aria-controls="faq6"><span class="faq-q">What happens to my data if I cancel?</span><span class="wdw-icon faq-toggle" aria-hidden="true"></span></button></h3>
          <div id="faq6" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body wdw-muted">Your workspace stays read-only for 30 days so you can export everything as CSV or JSON. After that it is permanently deleted.</div></div>
        </div>
        </div>
      </div>
      <div class="col-lg-5">
        <aside class="wdw-aurora rounded-4 p-4 p-md-5 h-100 d-flex flex-column justify-content-end gap-3 overflow-hidden" aria-labelledby="helpTitle" style="min-height:320px">
          <div class="d-flex align-items-center">
            <img class="rounded-circle border border-2 border-light" src="https://i.pravatar.cc/96?img=47" width="48" height="48" alt="Support teammate Maya">
            <img class="rounded-circle border border-2 border-light" style="margin-left:-.75rem" src="https://i.pravatar.cc/96?img=12" width="48" height="48" alt="Support teammate Leo">
            <img class="rounded-circle border border-2 border-light" style="margin-left:-.75rem" src="https://i.pravatar.cc/96?img=32" width="48" height="48" alt="Support teammate Ana">
          </div>
          <h2 id="helpTitle" class="h3 mb-0" style="font-weight:800">Still have questions?</h2>
          <p class="mb-0 opacity-75">Our team replies within one business day. Real people, no bots.</p>
          <div><a href="#" class="btn btn-light rounded-pill px-4">Contact us</a></div>
        </aside>
      </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