Web Designer Wall

Snippets Accordion

Bootstrap 5 FAQ Accordion with Plus/Minus Toggle

A two-column FAQ section with an intro panel and an accordion of four questions where one answer opens at a time.

Bootstrap 5 No jQuery Nov 2019 3K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1040px">
    <div class="row gy-5 gx-lg-5 align-items-start">
      <div class="col-lg-5">
        <span class="wdw-eyebrow">Support</span>
        <h2 class="wdw-heading display-5 mt-1 mb-3">Frequently asked questions</h2>
        <p class="wdw-muted mb-4">Quick answers about the framework. Can't find yours? Our team replies within a day.</p>
        <a href="#" class="btn btn-primary rounded-pill px-4">Contact support</a>
      </div>
      <div class="col-lg-7">
        <div class="accordion wdw-faq" id="faq">
          <div class="accordion-item">
            <h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#f1" aria-expanded="true" aria-controls="f1">What is the Bootstrap framework?</button></h3>
            <div id="f1" class="accordion-collapse collapse show" data-bs-parent="#faq"><div class="accordion-body">Bootstrap is an open-source front-end toolkit with a responsive grid, ready-made components and utility classes, so you can build consistent interfaces without writing everything from scratch.</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="#f2" aria-expanded="false" aria-controls="f2">How do I create a responsive website with Bootstrap?</button></h3>
            <div id="f2" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body">Add the viewport meta tag, wrap your content in a container and lay it out with rows and columns. Breakpoint classes like <code>col-md-6</code> adapt the layout at each screen size.</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="#f3" aria-expanded="false" aria-controls="f3">Does Bootstrap support all modern browsers?</button></h3>
            <div id="f3" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body">Yes. Bootstrap 5 targets the latest versions of Chrome, Firefox, Safari and Edge on desktop and mobile, and no longer supports Internet Explorer.</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="#f4" aria-expanded="false" aria-controls="f4">Can I use Bootstrap for mobile app development?</button></h3>
            <div id="f4" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body">You can use it for the interface of hybrid apps built with web technologies, such as those wrapped by Capacitor or Cordova, or for progressive web apps.</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