Accordions look simple until you move beyond the default markup. FAQ sections, settings panels, product detail pages: each adds a layer of requirements. Knowing exactly how Bootstrap 5 handles accordion behaviour will save you hours of debugging and keep your layouts clean.
- Bootstrap 5 accordions use pure CSS and the native Collapse plugin, with no jQuery dependency.
- The data-bs-parent attribute controls whether sibling items close automatically when a new one opens.
- You can combine accordions with Bootstrap 5 grid layouts and custom CSS variables to match any brand style.
- Accessibility is built in via ARIA attributes, but only if you use the correct markup structure from the start.
How the Bootstrap 5 Accordion Works
Bootstrap 5 dropped jQuery entirely. The accordion now relies on a bundled Collapse plugin written in vanilla JavaScript. The mechanism is simple: each accordion item has a header button and a collapsible panel. Clicking the button toggles the show class on the target panel via the data-bs-toggle=”collapse” attribute.
The outer wrapper uses the class accordion. Add data-bs-parent pointing to that wrapper and Bootstrap ensures only one panel stays open at a time. Remove that attribute and panels open independently, which is the right choice for checklists or settings screens where users need to compare multiple open sections simultaneously.
If you are building on the Canvas HTML Template, Bootstrap 5 is already bundled. Do not load Bootstrap from a CDN alongside Canvas as it will cause duplicate script conflicts.
Basic Accordion Markup
Below is a complete, working three-item accordion you can drop into any Bootstrap 5 page. The accordion-flush modifier is omitted here to keep the default bordered style, and the first item is open by default using the show class on its panel.
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
What is included in the free plan?
</button>
</h2>
<div id="collapseOne"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
The free plan includes up to 3 projects, community support,
and access to all core layout tools.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
Can I upgrade at any time?
</button>
</h2>
<div id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
Yes. You can upgrade or downgrade your plan from the billing
settings page at any point during your subscription.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree">
Is there a money-back guarantee?
</button>
</h2>
<div id="collapseThree"
class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
All paid plans come with a 14-day money-back guarantee,
no questions asked.
</div>
</div>
</div>
</div>Two details matter here. First, closed buttons carry the collapsed class, which rotates the chevron icon. Forget it and the icon points the wrong direction on load. Second, aria-expanded must match the actual open or closed state for screen readers. Both need to be correct in your initial HTML before JavaScript touches anything.
Using the Flush Variant for Cleaner Layouts
Adding accordion-flush to the outer wrapper removes the outer border and rounded corners, making the component sit flush inside a card, sidebar, or full-width section. Use it when you want FAQ items that feel integrated with the surrounding content rather than boxed off. The default bordered style draws attention to the component itself; the flush variant defers to the page.
<div class="accordion accordion-flush" id="flushAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="flushHeadingOne">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flushCollapseOne"
aria-expanded="false"
aria-controls="flushCollapseOne">
How does billing work?
</button>
</h2>
<div id="flushCollapseOne"
class="accordion-collapse collapse"
aria-labelledby="flushHeadingOne"
data-bs-parent="#flushAccordion">
<div class="accordion-body">
Billing is monthly or annual. Annual plans are charged upfront
and include a 20% discount.
</div>
</div>
</div>
</div>This pattern pairs well with the two-column grid approach discussed in Everything You Need to Know About Bootstrap 5 Grid System, where you might place a flush accordion in one column alongside an image or feature list in the other.
Custom Styling with CSS Variables
Bootstrap 5 exposes CSS custom properties on the accordion component, so you can restyle without overriding compiled Sass. The relevant variables are set on .accordion and can be scoped to a specific instance if needed.
/ Global accordion overrides /
.accordion {
--bs-accordion-btn-color: #1a1a2e;
--bs-accordion-btn-bg: #f8f9fa;
--bs-accordion-active-color: #ffffff;
--bs-accordion-active-bg: #0d6efd;
--bs-accordion-border-radius: 0.5rem;
--bs-accordion-inner-border-radius: 0.4rem;
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/ Scoped to a single accordion instance /
#faqAccordion {
--bs-accordion-active-bg: #6610f2;
--bs-accordion-active-color: #fff;
}If you are working inside Canvas, keep these overrides in a separate custom CSS file rather than editing style.css directly. Canvas uses –cnvs-themecolor as its primary colour variable, so you can link the two systems cleanly:
#faqAccordion {
--bs-accordion-active-bg: var(--cnvs-themecolor);
--bs-accordion-active-color: #fff;
}For more on Bootstrap 5 typographic styling that complements your accordion headers, see Bootstrap 5 Typography: Font Size, Weight and Text Utilities Guide.
Controlling Accordions with the JavaScript API
Sometimes you need to open or close a specific panel programmatically: after a form submission, a route change in a single-page app, or a guided tutorial flow. Bootstrap 5 exposes a straightforward API for this.
// Open a specific panel programmatically
const collapseEl = document.getElementById('collapseTwo');
const bsCollapse = new bootstrap.Collapse(collapseEl, {
toggle: false // prevent auto-toggle on instantiation
});
bsCollapse.show(); // open the panel
// bsCollapse.hide(); // close the panel
// bsCollapse.toggle(); // toggle state
// Listen for open/close events
collapseEl.addEventListener('shown.bs.collapse', () => {
console.log('Panel two is now open');
});
collapseEl.addEventListener('hidden.bs.collapse', () => {
console.log('Panel two is now closed');
});The four events you will use most are show.bs.collapse (fires before opening), shown.bs.collapse (fires after the transition completes), hide.bs.collapse, and hidden.bs.collapse. These are useful for analytics tracking, lazy-loading images inside panels, or triggering animations on surrounding elements. Note that show and hide fire at the start of the transition, so any DOM manipulation you do there will run before the animation finishes.
Accordion Best Practices for Production Pages
A technically correct accordion can still hurt conversions if implemented without thought. Here are the patterns that consistently perform well on production landing pages and product sites in 2025 and 2026:
- Open the most important item by default. Users scan pages quickly. If you have a FAQ block, open the question that addresses the biggest objection so it is visible without interaction.
- Keep panel content concise. Accordions are not a substitute for dedicated pages. If a panel answer exceeds three paragraphs, consider linking to a full help article instead.
- Never nest accordions inside accordions. Bootstrap does not prevent this in markup, but the UX becomes confusing and the data-bs-parent targeting breaks in unpredictable ways.
- Use semantic heading levels inside accordion headers. Bootstrap wraps button elements in <h2> by default, which is correct for most FAQ sections. If your accordion sits inside an existing <h2> section, use <h3> instead to maintain document outline integrity.
- Test keyboard navigation. Each accordion button must be reachable and operable with the Tab and Enter keys. Bootstrap handles this by default, but custom CSS that hides focus outlines will break the experience for keyboard users.
If you are building FAQ sections as part of a broader landing page conversion strategy, the advice in 15 Landing Page Design Mistakes and How to Fix Them covers several common errors that directly affect how accordion blocks perform in practice.
Frequently Asked Questions
Can Bootstrap 5 accordions work without JavaScript?
No. The collapse animation and toggle behaviour depend on Bootstrap’s bundled Collapse plugin. The markup alone will render the headers but panels will not open or close without JavaScript running. Always include js/plugins.min.js and js/functions.bundle.js if you are on Canvas, or the Bootstrap 5 bundle script on a standard project.
How do I allow multiple accordion panels to be open at the same time?
Remove the data-bs-parent attribute from every .accordion-collapse element. Without it, Bootstrap will not close sibling panels when a new one opens. Each panel then manages its own state independently.
What is the difference between accordion-flush and the default accordion?
The default accordion has an outer border and rounded corners on the container. accordion-flush strips those styles so the component sits edge-to-edge inside its parent container. The flush variant is common inside cards, sidebars, and full-width page sections where the outer border would look redundant.
How do I animate the accordion open and close speed?
Bootstrap’s collapse transition uses a CSS transition on the height property. You can override the duration by targeting the .collapsing class: .collapsing { transition-duration: 0.5s; }. Increase the value for a slower animation or decrease it for a snappier feel. Avoid setting it to zero as this can cause layout flashes.
Is the Bootstrap 5 accordion accessible by default?
Yes, provided you use the correct markup. Each button needs a matching aria-controls value pointing to the panel ID, aria-expanded must reflect the current state, and each panel needs an aria-labelledby pointing back to its header. Bootstrap’s JavaScript updates aria-expanded automatically on toggle, but the initial values in your HTML must be correct.
If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.