Bootstrap 5 FAQ Accordion
A FAQ accordion is a vertically stacked list of questions where each answer panel expands and collapses on click, letting users scan questions quickly and read only the answers they need. It is composed from Bootstrap 5's native Accordion component (built on Collapse), the Card primitive, and utility classes for spacing, typography, and colour. Use it on support pages, product landing pages, and onboarding flows where a long list of questions would otherwise create excessive scroll depth.
Primary Class
.accordionCommon Use Cases
- →A SaaS pricing page lists 12 billing and plan questions in a collapsible accordion so users can jump to their specific concern without reading a wall of text.
- →An e-commerce returns policy section uses a FAQ accordion to present shipping, refund, and exchange rules in labelled question groups, reducing support ticket volume.
- →A developer documentation site uses a FAQ accordion on an API reference page to surface common integration errors and their solutions without cluttering the main content.
- →A medical clinic website places a FAQ accordion on its appointments page to answer questions about referrals, insurance acceptance, and cancellation policy in an accessible, keyboard-navigable format.
Variants & Classes
| Variant | Description |
|---|---|
| Default flush accordion | Uses Bootstrap's built-in .accordion-flush to remove outer borders and rounded corners, producing a clean edge-to-edge list suitable for full-width content sections. |
| Always-open (multi-expand) | Add data-bs-parent omission and no accordion parent binding so multiple panels can be open simultaneously, useful when users need to compare several answers at once. |
| Bordered card style | Wraps each accordion item in a shadow card using .shadow-sm and .mb-3 with rounded corners, visually separating questions into distinct blocks for a more structured appearance. |
| Icon-right chevron | Overrides the default left-aligned chevron via a small inline style block so the toggle icon sits on the far right, a common pattern in marketing site FAQs. |
Code Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FAQ Accordion</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
.accordion-button:not(.collapsed) {
background-color: #f0f4ff;
color: #0d6efd;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}
.faq-label {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
</style>
</head>
<body class="bg-light py-5">
<div class="container" style="max-width:720px">
<h2 class="fw-bold mb-1">Frequently Asked Questions</h2>
<p class="text-muted mb-4">Can't find what you're looking for? <a href="#">Contact support</a>.</p>
<p class="faq-label text-primary fw-semibold mb-2">Billing & Plans</p>
<div class="accordion mb-4" id="faqBilling">
<div class="accordion-item border rounded-3 mb-2">
<h3 class="accordion-header" id="billQ1">
<button class="accordion-button rounded-3" type="button"
data-bs-toggle="collapse" data-bs-target="#billA1"
aria-expanded="true" aria-controls="billA1">
Can I change my plan at any time?
</button>
</h3>
<div id="billA1" class="accordion-collapse collapse show"
aria-labelledby="billQ1" data-bs-parent="#faqBilling">
<div class="accordion-body text-muted">
Yes. You can upgrade or downgrade your plan from the Billing section of your account dashboard. Changes take effect at the start of your next billing cycle, and any unused credit is carried forward automatically.
</div>
</div>
</div>
<div class="accordion-item border rounded-3 mb-2">
<h3 class="accordion-header" id="billQ2">
<button class="accordion-button collapsed rounded-3" type="button"
data-bs-toggle="collapse" data-bs-target="#billA2"
aria-expanded="false" aria-controls="billA2">
Do you offer annual billing discounts?
</button>
</h3>
<div id="billA2" class="accordion-collapse collapse"
aria-labelledby="billQ2" data-bs-parent="#faqBilling">
<div class="accordion-body text-muted">
Annual plans are billed at a 20% discount compared to monthly pricing. You can switch to annual billing at any time from the Billing page; the remaining days on your current monthly period are pro-rated.
</div>
</div>
</div>
<div class="accordion-item border rounded-3 mb-2">
<h3 class="accordion-header" id="billQ3">
<button class="accordion-button collapsed rounded-3" type="button"
data-bs-toggle="collapse" data-bs-target="#billA3"
aria-expanded="false" aria-controls="billA3">
What payment methods do you accept?
</button>
</h3>
<div id="billA3" class="accordion-collapse collapse"
aria-labelledby="billQ3" data-bs-parent="#faqBilling">
<div class="accordion-body text-muted">
We accept all major credit and debit cards (Visa, Mastercard, American Express), PayPal, and SEPA direct debit for European customers. Invoice billing is available on Enterprise plans.
</div>
</div>
</div>
</div>
<p class="faq-label text-primary fw-semibold mb-2">Account & Security</p>
<div class="accordion mb-4" id="faqAccount">
<div class="accordion-item border rounded-3 mb-2">
<h3 class="accordion-header" id="accQ1">
<button class="accordion-button collapsed rounded-3" type="button"
data-bs-toggle="collapse" data-bs-target="#accA1"
aria-expanded="false" aria-controls="accA1">
How do I enable two-factor authentication?
</button>
</h3>
<div id="accA1" class="accordion-collapse collapse"
aria-labelledby="accQ1" data-bs-parent="#faqAccount">
<div class="accordion-body text-muted">
Navigate to <strong>Settings → Security</strong> and click <em>Enable two-factor authentication</em>. You can use any TOTP app such as Google Authenticator or Authy. Backup codes are generated at setup and should be stored securely.
</div>
</div>
</div>
<div class="accordion-item border rounded-3 mb-2">
<h3 class="accordion-header" id="accQ2">
<button class="accordion-button collapsed rounded-3" type="button"
data-bs-toggle="collapse" data-bs-target="#accA2"
aria-expanded="false" aria-controls="accA2">
Can I invite team members to my account?
</button>
</h3>
<div id="accA2" class="accordion-collapse collapse"
aria-labelledby="accQ2" data-bs-parent="#faqAccount">
<div class="accordion-body text-muted">
Team seats are available on the Pro and Enterprise plans. Go to <strong>Settings → Team</strong>, enter a colleague's email address, and assign them a role. Invited members receive an email with a secure sign-up link.
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Live Examples
Flush FAQ with no outer borders
A borderless FAQ list using .accordion-flush, suitable for embedding inside a card or a coloured section where third-party borders would look redundant.
Multi-expand FAQ (all panels independently openable)
Omitting data-bs-parent allows multiple answers to be open simultaneously, which is preferable when users need to compare answers side by side.
FAQ with structured data markup
Adds JSON-LD FAQPage schema so search engines can display question-and-answer rich results. The visible accordion markup is unchanged; the script tag sits in the head or at the end of the body.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Single-category FAQ accordion with flush styling for embedding inside a landing page section
- ✓Multi-category tabbed FAQ where each tab contains its own accordion group, generated automatically from a prompt in Canvas Builder
- ✓Dark-theme FAQ accordion using bg-dark and text-light utilities throughout
- ✓Minimal FAQ accordion with icon-right chevrons and no visible panel borders, suitable for minimal SaaS layouts
- ✓FAQ accordion pre-populated with questions and answers extracted from a support knowledge base via a Canvas Builder content prompt
Best Practices
Use unique IDs across the entire page
Every accordion-button's data-bs-target, the corresponding collapse div's id, and the aria-controls value must be unique within the document. If you embed two FAQ accordions on one page and reuse IDs such as #faq1, Bootstrap's Collapse plugin will target the first matching element and the second accordion will not function correctly.
Add JSON-LD FAQPage schema for SEO
Google can display FAQ rich results in search if you include a FAQPage JSON-LD block whose question text and answer text exactly match the visible accordion content. Keep the schema in sync with the markup — stale schema that contradicts the visible text can trigger a manual penalty. The schema adds zero visual overhead and typically improves click-through rate on informational queries.
Prefer h3 (or appropriate heading level) inside accordion-header
Bootstrap's .accordion-header div does not carry semantic heading weight on its own. Wrap the accordion-button inside an h2, h3, or h4 that reflects the correct document outline — a FAQ section nested under an h2 section heading should use h3 elements for each question. This directly benefits screen reader navigation and document structure scoring in accessibility audits.
Control open-on-load state without JavaScript
To pre-open a specific panel on page load, add the show class to its .accordion-collapse div and remove the collapsed class from its .accordion-button, setting aria-expanded to true. No JavaScript initialisation is required; Bootstrap's Collapse plugin reads the initial DOM state on DOMContentLoaded and respects it automatically.