Recommended Free Tools
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’s accordion uses its Collapse JavaScript plugin to show and hide FAQ panels. The supplied title refers to a specific “V07” template, but the available official documentation does not verify that template’s download, design, license, files, or behavior. The example below is a Bootstrap 5.3 implementation, not a verified V07 asset.
How a Bootstrap accordion works
Bootstrap uses the .collapse class to hide a panel, .collapse.show to display it, and .collapsing while the panel transitions. Its data attributes connect a trigger button to the panel it controls. Add data-bs-parent when you want panels in a group to behave as an accordion, rather than allowing multiple panels to remain open independently. See the official Bootstrap v5.3 Accordion documentation for the component’s markup and options.
Build an FAQ accordion with Bootstrap 5.3
This example follows Bootstrap v5.3’s accordion markup. The button’s data-bs-target selector must match the ID of the collapsible panel. The panel needs the accordion-collapse and collapse classes; data-bs-parent points to the containing accordion.
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 errors<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeadingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse"
data-bs-target="#faqPanelOne"
aria-expanded="true"
aria-controls="faqPanelOne">
What does an accordion do?
</button>
</h3>
<div id="faqPanelOne"
class="accordion-collapse collapse show"
aria-labelledby="faqHeadingOne"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
It lets visitors expand a question to read its answer.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faqHeadingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#faqPanelTwo"
aria-expanded="false"
aria-controls="faqPanelTwo">
Can more than one answer stay open?
</button>
</h3>
<div id="faqPanelTwo"
class="accordion-collapse collapse"
aria-labelledby="faqHeadingTwo"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
With this parent setting, opening another panel closes the current one.
</div>
</div>
</div>
</div>The snippet shows the component’s HTML and data-attribute relationships. The Collapse JavaScript plugin is required for the interaction; HTML classes alone do not provide the expand-and-collapse behavior. Use the Bootstrap JavaScript setup appropriate to your project, following the official v5.3 documentation.
#1 Best Overall
Set which FAQ is open on page load
For a panel that should start open, apply the open state consistently in both the panel and its trigger button:
- Add
.showto the panel’s.accordion-collapse.collapseelement. - Set the corresponding button’s
aria-expandedvalue to"true". - Remove
.collapsedfrom that button.
For a panel that starts closed, omit .show, set aria-expanded="false", and use .collapsed on the button. Keeping these states aligned avoids a mismatch between what the component displays and what the button reports.
Customize the look and motion
Bootstrap v5.3 supports accordion-local CSS variables for styling, and Sass customization is also available. These approaches let you adjust the component without treating a particular third-party template as part of Bootstrap itself. The transition effect responds to the prefers-reduced-motion media query, so the animation is affected by a visitor’s reduced-motion preference. Refer to the Bootstrap v5.3 documentation for the available variables and Sass guidance.
What is verified about “V07”?
The official source establishes how Bootstrap v5.3’s accordion works; it does not identify or authenticate a particular “V07” download. The exact template’s source, license, bundled assets, framework compatibility, and demo behavior are therefore not established here. If you have a V07 package, check its own license and inspect its markup and dependencies before using it; Bootstrap’s component documentation alone cannot confirm those details.
Also, do not infer that using Bootstrap’s accordion automatically implements every optional keyboard interaction described by the WAI-ARIA authoring pattern. The cited Bootstrap documentation does not establish that broader claim. Test the behavior needed for your site with the actual markup and scripts you deploy.
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.
