Web Designer Wall

Snippets Accordion

Bootstrap 5 Accordion FAQ (No Custom JavaScript)

An FAQ-style accordion of rounded cards where only one answer is open at a time, built on the Bootstrap collapse component.

Bootstrap 5 Bootstrap 6 No jQuery Jul 2019 18.3K 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">
        <span class="wdw-eyebrow">FAQ</span>
        <h1 class="display-6 wdw-heading mt-1 mb-2">Frequently asked questions</h1>
        <p class="wdw-muted mb-4">Quick answers to the things people ask most.</p>
        <div class="wdw-aurora rounded-4 p-4 overflow-hidden">
          <h2 class="h5 fw-bold mb-1">Still have questions?</h2>
          <p class="mb-3 opacity-75 small">Our support team replies within a few hours on weekdays.</p>
          <a class="btn btn-light rounded-pill px-4" href="#">Contact support</a>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="accordion ac" id="faqAccordion">
        <div class="accordion-item">
          <h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq0" aria-expanded="true" aria-controls="faq0"><span class="wdw-icon cr-num" aria-hidden="true">01</span><span class="me-auto">How do I get started?</span></button></h2>
          <div id="faq0" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion"><div class="accordion-body wdw-muted">Create an account, pick a plan and invite your team. Your workspace is ready in under a minute, and the setup checklist walks you through the rest.</div></div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="false" aria-controls="faq1"><span class="wdw-icon cr-num" aria-hidden="true">02</span><span class="me-auto">Can I change my plan later?</span></button></h2>
          <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"><div class="accordion-body wdw-muted">Yes. Upgrade or downgrade at any time from billing settings. Changes apply immediately and we prorate the difference on your next invoice.</div></div>
        </div>
        <div class="accordion-item">
          <h2 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="wdw-icon cr-num" aria-hidden="true">03</span><span class="me-auto">What payment methods do you accept?</span></button></h2>
          <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"><div class="accordion-body wdw-muted">All major credit and debit cards, plus bank transfer for annual plans. Invoices are emailed automatically with VAT where applicable.</div></div>
        </div>
        <div class="accordion-item">
          <h2 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="wdw-icon cr-num" aria-hidden="true">04</span><span class="me-auto">Is there a free trial?</span></button></h2>
          <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"><div class="accordion-body wdw-muted">Every paid plan starts with a 14-day free trial. No card is needed to begin, and you can cancel with a single click.</div></div>
        </div>
        <div class="accordion-item">
          <h2 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="wdw-icon cr-num" aria-hidden="true">05</span><span class="me-auto">How do I contact support?</span></button></h2>
          <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"><div class="accordion-body wdw-muted">Use the chat in the bottom corner or email support. We reply within a few hours on weekdays, and faster for priority plans.</div></div>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

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