Web Designer Wall

Snippets Accordion

Bootstrap 5 Accordion FAQ Template

A four-item FAQ accordion with numbered questions, rounded cards and smooth open and close animation.

Bootstrap 5 No jQuery Oct 2020 2.2K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="row g-4 g-lg-5 align-items-start">
      <div class="col-lg-5">
        <div class="faq-intro">
          <span class="wdw-eyebrow">FAQ</span>
          <h2 class="wdw-heading display-6 mt-1 mb-3">Frequently asked questions</h2>
          <p class="wdw-muted mb-4">Quick answers to what teams ask us most before they sign up.</p>
          <div class="wdw-card-sm p-4 d-flex gap-3 align-items-start">
            <span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z"/></svg></span>
            <div>
              <h3 class="h6 fw-bold mb-1">Still have questions?</h3>
              <p class="small wdw-muted mb-3">Our team is happy to help you pick the right plan.</p>
              <a href="#contact" class="btn btn-primary btn-sm rounded-pill px-3">Contact support</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-7">
    <div class="accordion faq" 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-num">01</span>How does the free trial work?</button></h3>
        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faq"><div class="accordion-body">You get 14 days of full access with no credit card. Invite your team, connect your data and ship a real project before you decide on a 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="#faq2" aria-expanded="false" aria-controls="faq2"><span class="faq-num">02</span>Can I change or cancel my plan later?</button></h3>
        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body">Yes. Upgrade, downgrade or cancel from the billing page at any time. Changes are prorated, and you 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="#faq3" aria-expanded="false" aria-controls="faq3"><span class="faq-num">03</span>Do you offer discounts for startups and nonprofits?</button></h3>
        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body">We give 50% off the first year to verified startups, nonprofits and students. Send us a short note from your work address and we will set it up within a day.</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-num">04</span>Is my data secure?</button></h3>
        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body">All data is encrypted in transit and at rest, backups run every night, and we are SOC 2 Type II audited. You can export or delete your data 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-num">05</span>How fast does support reply?</button></h3>
        <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body">Email support answers within one business day. Paid plans also get a shared Slack channel with replies in under two hours during working time.</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