Bootstrap 5 accordions are used to show and hide content in collapsible panels. This page covers 4 accordion patterns — basic, flush, always-open and custom styled — each commonly used in FAQ sections and content-heavy pages.

Quick Setup

Accordions require Bootstrap 5 JS bundle:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

ClassWhat It Does
.accordionRequired wrapper element
.accordion-itemEach collapsible panel
.accordion-headerHeader containing the toggle button
.accordion-buttonClickable button that toggles the panel
.accordion-button.collapsedCollapsed state of the button
.accordion-collapseThe collapsible content wrapper
.accordion-bodyContent inside the collapsible panel
.accordion-flushRemoves borders and rounded corners
.showMakes a panel visible by default
data-bs-parentLinks panels so only one is open at a time

1. Basic Bootstrap 5 Accordion

A standard accordion where only one panel is open at a time. Click a heading to expand or collapse.

2. Bootstrap 5 Flush Accordion

Accordion without borders and rounded corners using accordion-flush. Blends into the page background.

3. Bootstrap 5 Always Open Accordion

Multiple panels can be open simultaneously by removing data-bs-parent. Each panel toggles independently.

4. Bootstrap 5 Custom Styled Accordion

Accordion with custom colors, icons and styling. Great for FAQ sections on landing pages.

Frequently Asked Questions

Remove the data-bs-parent attribute from each accordion-collapse div. This breaks the link between panels so each one toggles independently. Add 'show' class to any panels you want open by default.
The accordion arrow is set via the accordion-button::after CSS pseudo-element using a background-image SVG. Override it with: .accordion-button::after { filter: invert(1); } for white arrows, or replace the background-image with a custom SVG.
Use the accordion-flush class on the accordion wrapper: <div class='accordion accordion-flush'>. This removes all outer borders and rounded corners. To remove individual borders use border-0 on accordion-item.
Use the Collapse class: const collapse = new bootstrap.Collapse(document.getElementById('myPanel'), { toggle: false }); collapse.show(); To hide: collapse.hide(). To toggle: collapse.toggle().
Bootstrap 5 already includes a smooth CSS transition by default. To customize the speed override the CSS variable: .accordion { --bs-accordion-transition: height 0.4s ease; }. Increase the value for slower animation.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Modal Example

View examples →

Bootstrap 5 Tabs Example

View examples →

Bootstrap 5 Alert Example

View examples →