Bootstrap 5

Bootstrap 5 FAQ Accordion

The Bootstrap 5 FAQ Accordion is a vertically stacked set of collapsible content panels built with the `.accordion` component, allowing users to expand one (or multiple) answers while collapsing others. It uses `data-bs-toggle='collapse'` and `data-bs-target` attributes to wire up interactivity without writing JavaScript. Use it wherever you need to present a large volume of Q&A content in a scannable, space-efficient layout — product pages, support centers, pricing sections, and onboarding flows.

Primary Class

.faq-accordion

Common Use Cases

→SaaS pricing pages where prospects have recurring questions about billing cycles, plan limits, and cancellation policies before converting
→E-commerce product pages answering shipping timeframes, return windows, and size guide queries without sending users to a separate support article
→Developer documentation hubs grouping common integration errors and troubleshooting steps by API endpoint or SDK version
→Employee onboarding portals presenting HR policy questions — leave entitlements, equipment requests, payroll schedules — organised by department

Variants & Classes

Variant	Description	Classes
FAQ Accordion Default	Standard faq accordion with Bootstrap's default styling.	`faq-accordion`
FAQ Accordion Responsive	Responsive variant that adapts to different screen sizes.	`faq-accordion faq-accordion-responsive`

Code Example

<div class="accordion" id="faqAccordion">

  <div class="accordion-item">
    <h2 class="accordion-header" id="faq1-heading">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
        What payment methods do you accept?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show" aria-labelledby="faq1-heading" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        We accept Visa, Mastercard, American Express, and PayPal. All transactions are processed securely via Stripe. Invoiced billing is available on Business and Enterprise plans.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="faq2-heading">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">
        Can I change my plan after signing up?
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse" aria-labelledby="faq2-heading" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Yes. You can upgrade or downgrade your plan at any time from the Billing section of your account dashboard. Upgrades take effect immediately; downgrades apply at the next billing cycle.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="faq3-heading">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3">
        Is there a free trial available?
      </button>
    </h2>
    <div id="faq3" class="accordion-collapse collapse" aria-labelledby="faq3-heading" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        All new accounts include a 14-day free trial with full access to Pro plan features. No credit card is required to start. Your trial ends automatically — we will never charge you without confirmation.
      </div>
    </div>
  </div>

</div>

Live Examples

Basic FAQ Accordion

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated faq accordion with custom colours
✓FAQ Accordion with interactive states
✓Responsive faq accordion for all screen sizes

Best Practices

Remove data-bs-parent to allow multiple panels open simultaneously

Omitting the `data-bs-parent` attribute from each `.accordion-collapse` div lets users expand several answers at once — useful for comparison-heavy FAQs where readers need to reference two answers side by side.

Use flush variant to integrate with bordered layouts

Adding `.accordion-flush` to the outer `.accordion` element removes the outer border and rounded corners, making the component sit cleanly inside a card or a full-width section with its own background colour.

Pre-open the most critical answer by default

Add `show` to the first `.accordion-collapse` and keep `aria-expanded='true'` on its button — this surfaces your most important answer immediately, reducing the cognitive load of deciding which panel to click first.

Wrap accordion-body content in a structured list for multi-part answers

The `.accordion-body` div accepts any HTML, so replace plain paragraphs with `<ul>` or `<ol>` lists when an answer has distinct steps or bullet points — this improves readability and can earn rich-result eligibility in Google's FAQ schema.

FAQ

How do I add Google FAQ rich results schema to a Bootstrap 5 accordion?

Wrap your accordion in a `<div>` with `itemscope` and `itemtype='https://schema.org/FAQPage'`. For each accordion item, add `itemscope itemtype='https://schema.org/Question'` to the `.accordion-item` div, mark the button text with `itemprop='name'`, and wrap the `.accordion-body` content with `itemscope itemtype='https://schema.org/Answer'` plus `itemprop='text'` on the inner paragraph. This does not affect Bootstrap's JS behaviour but makes the page eligible for FAQ rich results in Google Search.

How do I customise the accordion's expand/collapse arrow icon colour and style?

Bootstrap 5 uses an inline SVG background-image on `.accordion-button::after` for the chevron. Override it in your CSS by targeting `.accordion-button::after { background-image: url("data:image/svg+xml,..."); }` with your own encoded SVG, or change just the tint by overriding the `--bs-accordion-btn-icon` CSS variable. For the active state, override `--bs-accordion-btn-active-icon`. You can also replace the icon entirely with a Font Awesome `+`/`-` toggle by hiding the default pseudo-element and injecting your own icon inside the button markup.

How does Canvas Builder generate FAQ Accordion components?

When you describe an FAQ section in Canvas Builder, it generates fully wired Bootstrap 5 accordion markup with your specified questions and answers, applies your brand's primary colour to the active button state via CSS variable overrides (`--bs-accordion-active-color`, `--bs-accordion-active-bg`), and outputs semantic heading hierarchy (h2/h3 depending on page structure) so the component is accessible and SEO-ready without any post-generation editing.