iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Bootstrap 5’s accordion is built on its Collapse plugin. Connect each button to a panel by ID, then decide whether opening one panel should close the others. You can also show a panel on page load or use flush styling; the examples below cover each choice.
What Bootstrap’s accordion does
Bootstrap describes the accordion as a vertically collapsing component that uses the Collapse JavaScript plugin. Its markup consists of an accordion wrapper, items, headers, buttons, and collapsible panels. The official Bootstrap 5.3 documentation is the reference for the component’s markup and behavior: Bootstrap Accordion documentation.
The phrase “Free Account Accordion” does not identify an account feature in the cited Bootstrap documentation. Bootstrap’s accordion is a front-end component; the example here uses the documented component markup and does not depend on a special account tier.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →How to build a basic accordion
Give each panel a unique ID. Point its button’s data-bs-target and aria-controls attributes to that ID. The example below lets multiple panels remain open because it does not set data-bs-parent.
#1 Best Overall
<div class="accordion" id="helpAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#panelOne"
aria-expanded="false" aria-controls="panelOne">
First question
</button>
</h2>
<div id="panelOne" class="accordion-collapse collapse"
aria-labelledby="headingOne">
<div class="accordion-body">
Content for the first panel.
</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="#panelTwo"
aria-expanded="false" aria-controls="panelTwo">
Second question
</button>
</h2>
<div id="panelTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo">
<div class="accordion-body">
Content for the second panel.
</div>
</div>
</div>
</div>Use the Bootstrap CSS and JavaScript required by your project for the component to render and respond to clicks. The button’s aria-expanded value describes its current state; Bootstrap’s examples pair a closed button with the collapsed class and aria-expanded="false".
Choose whether panels can stay open together
With no data-bs-parent attribute on the collapse panels, users can open more than one item. To enforce one open item at a time, add the accordion container as each panel’s parent:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<div id="panelOne" class="accordion-collapse collapse"
data-bs-parent="#helpAccordion"
aria-labelledby="headingOne">Apply the same data-bs-parent="#helpAccordion" attribute to the other panels in that group. Bootstrap’s documented “Always open” example omits the attribute to allow multiple open items.
Free tools Windows power users keep installed
One-click scans. No signup required.
Open a panel when the page loads
For an initially expanded panel, put show on its collapse element, remove collapsed from the corresponding button, and set that button’s aria-expanded value to true.
Rank #3
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#panelOne"
aria-expanded="true" aria-controls="panelOne">
First question
</button>
<div id="panelOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne">
<div class="accordion-body">
Content for the first panel.
</div>
</div>If this group should allow only one panel open, include data-bs-parent on its panels as described above. The initial state and the group’s open-panel rule are separate choices.
Use flush styling or customize the appearance
Edge-to-edge appearance
Add accordion-flush to the wrapper to remove the accordion’s borders and rounded corners for an edge-to-edge presentation:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
<div class="accordion accordion-flush" id="helpAccordion">CSS variables and Sass
Bootstrap documents CSS variables on the accordion component for local styling, along with Sass customization. Its documentation identifies accordion CSS-variable support as added in Bootstrap 5.2.0. See the Bootstrap 5.3 accordion documentation for the available variables and customization details.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsMotion and accessibility details
Bootstrap says the accordion animation depends on the prefers-reduced-motion media query, so its motion behavior follows that user preference. Keep the button’s aria-controls linked to the panel ID and its aria-expanded state synchronized with whether the panel is open.
The accordion page points readers to Collapse accessibility documentation rather than listing a complete accordion keyboard interaction pattern. Do not assume that the page alone establishes every optional keyboard behavior; consult the relevant accessibility guidance if your implementation needs a specific keyboard pattern.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
