Free tools Windows power users keep installed
One-click scans. No signup required.
Bootstrap’s accordion behavior comes from its Collapse plugin; the plus and minus signs are a visual customization. The example below uses Bootstrap 5.3 markup and CSS, with each button linked to its panel through Bootstrap data attributes. “V17” is not identified as a Bootstrap release in the available documentation, so this tutorial does not treat it as a version number.
Build the accordion with Bootstrap 5.3 markup
Bootstrap 5.3’s accordion uses an .accordion container, an .accordion-item for each entry, and a button that controls a collapsible panel. The button’s data-bs-target must match the panel’s ID. Bootstrap documents this structure in its Accordion component documentation.
As an Amazon Associate I earn from qualifying purchases.
<div class="accordion" id="helpAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#panelOne"
aria-expanded="false" aria-controls="panelOne">
How does the accordion work?
<span class="pm-icon" aria-hidden="true"></span>
</button>
</h2>
<div id="panelOne" class="accordion-collapse collapse"
aria-labelledby="headingOne" data-bs-parent="#helpAccordion">
<div class="accordion-body">
Bootstrap’s Collapse plugin expands and collapses this 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">
Can more than one panel stay open?
<span class="pm-icon" aria-hidden="true"></span>
</button>
</h2>
<div id="panelTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo" data-bs-parent="#helpAccordion">
<div class="accordion-body">
With this parent setting, opening a panel closes the other panel in the same group.
</div>
</div>
</div>
</div>Include Bootstrap 5.3’s CSS and JavaScript bundle in the page for the component styling and Collapse behavior. The sample’s data-bs-parent="#helpAccordion" makes the panels a mutually exclusive group: opening one closes another. To allow multiple panels to remain open, omit that attribute from the collapsible panels; Bootstrap documents both grouping and a stay-open example.
Style the closed and open indicators
Bootstrap 5.3 normally displays a chevron indicator. The following CSS hides that built-in background icon and draws a plus sign with two pseudo-elements. When Bootstrap removes .collapsed from the expanded button, the vertical stroke disappears, leaving a minus sign.
#1 Best Overall
.accordion-button::after {
background-image: none;
width: 1rem;
height: 1rem;
margin-left: auto;
}
.accordion-button .pm-icon {
position: relative;
flex: 0 0 1rem;
width: 1rem;
height: 1rem;
margin-left: auto;
}
.accordion-button .pm-icon::before,
.accordion-button .pm-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.75rem;
height: 2px;
background: currentColor;
transform: translate(-50%, -50%);
}
.accordion-button .pm-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform 0.15s ease-in-out;
}
.accordion-button:not(.collapsed) .pm-icon::after {
transform: translate(-50%, -50%) rotate(0);
}The icon span is marked aria-hidden="true" because it is decorative; the button’s text names the action. The selector .accordion-button:not(.collapsed) follows Bootstrap 5.3’s state class, so the icon reflects the same expanded state as the Collapse panel.
Keep initial state and accessibility attributes in sync
For a panel that starts closed, as in the sample, use .collapsed on the button, aria-expanded="false", and .collapse without .show on the panel. For one that starts open, change all three together: remove .collapsed from its button, set aria-expanded="true", and add .show to its panel. Bootstrap 5.3 documents these initial-state conventions. If only one is changed, the visual indicator, accessibility state, and displayed panel may disagree.
- Give every panel a unique ID, and use that exact ID in its button’s
data-bs-targetandaria-controls. - Keep the button’s
aria-expandedvalue aligned with whether its panel is open. - Use a real
buttonelement as the trigger, and retain visible text so the control is understandable without its icon. - Check keyboard operation in the Bootstrap version and project configuration you ship; do not assume every optional interaction in the ARIA accordion pattern is provided automatically.
Account for Bootstrap version differences
This code uses Bootstrap 5.3 conventions, including data-bs-toggle and data-bs-target. Do not copy those attributes into a Bootstrap 4 page unchanged: Bootstrap’s version-specific documentation should guide the markup and behavior for the version actually installed. Bootstrap 5.2 added local CSS variables for accordion customization while retaining Sass customization options; the default indicator remains a chevron unless you customize it. See the Bootstrap 5.2 accordion documentation for that version’s options.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsBootstrap 4.0’s Collapse documentation notes that its implementation does not cover every optional keyboard interaction described by the ARIA accordion pattern. If you maintain a Bootstrap 4 accordion, verify its keyboard behavior against your application’s accessibility requirements rather than assuming it matches Bootstrap 5.3.
Quick Recap
Rank #4
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.
