What Is Bootstrap 5 Accordion?
The Bootstrap 5 accordion is a component that stacks collapsible panels vertically, each with a clickable header that shows or hides its content, and by default opening one panel closes the others. It is built with the .accordion classes and Bootstrap's Collapse JavaScript plugin, and is commonly used for FAQs, product details and long content that users only need to read in part.
What Is the Bootstrap 5 Accordion?
Accordions let a page offer a lot of information without overwhelming the visitor: the questions or section titles are visible at a glance, and each answer appears only when requested. Bootstrap 5 made the accordion a dedicated component with its own classes; in Bootstrap 4, similar layouts were built by combining cards with the Collapse plugin. The structure uses .accordion for the wrapper, .accordion-item for each panel, .accordion-header for the heading, .accordion-button for the toggle, .accordion-collapse for the collapsible region and .accordion-body for the content. Variants include .accordion-flush, which removes the outer borders and rounded corners so the accordion sits edge to edge inside a parent such as a card, and an "always open" pattern in which several panels can be expanded at once. The accordion ships with a chevron icon that rotates when a panel opens, and its colours, borders and icon are controlled through CSS variables.
How the Bootstrap 5 Accordion Works
Each item pairs a button with a collapsible region. The button sits inside a heading element, for example <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">How long does delivery take?</button></h2>, followed by <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"><div class="accordion-body">...</div></div>. The data-bs-toggle="collapse" and data-bs-target attributes tell Bootstrap's Collapse plugin which region the button controls. When the button is clicked, the plugin animates the region's height, adds the .show class when it is open, toggles the .collapsed class on the button (which rotates the chevron) and updates aria-expanded so screen readers announce the new state. The data-bs-parent attribute, set to the ID of the .accordion wrapper, makes the panels mutually exclusive: opening one closes whichever is open. Remove data-bs-parent from every panel and the accordion becomes "always open". To start with a panel expanded, add .show to its collapse region, remove .collapsed from its button and set aria-expanded="true". The component needs Bootstrap's JavaScript, either bootstrap.bundle.min.js or bootstrap.min.js (Collapse does not require Popper), and it can also be controlled from your own scripts with bootstrap.Collapse.getOrCreateInstance(element).toggle() and events such as shown.bs.collapse.
Best Practices for the Bootstrap 5 Accordion
Use accordions for content that users scan and only partly need, such as FAQs, specifications, policies or course modules, not for core information every visitor must see, because hidden text is easy to miss. Write each header as a clear, specific question or label so users can decide which panel to open without opening them all. Choose the heading level to fit the page outline: if the accordion sits under an <h2> section, its .accordion-header elements should be <h3>. Keep the toggle as a real <button> so it works with the keyboard, and leave the aria-expanded and aria-controls attributes in place. Decide deliberately between the default mode and "always open": exclusive panels suit short FAQs, while content that people compare is easier to use when several panels can stay open. Avoid nesting accordions inside accordions, which is hard to navigate on mobile. Keep the answers in the HTML rather than loading them on click, so search engines can read them; Google indexes content in collapsed sections and, under mobile-first indexing, gives it full weight. If you add FAQPage structured data for an FAQ accordion, make sure it matches the visible questions and answers exactly, and remember that Google stopped showing FAQ rich results in May 2026, so the markup no longer changes how the page looks in search.
Bootstrap 5 Accordion and Canvas Builder
Canvas Builder generates Bootstrap 5 pages, so if you ask for an FAQ or details section you can check the accordion markup in the exported HTML and adjust it, for example removing data-bs-parent to let several answers stay open. The free Bootstrap Accordion Generator on canvasbuilder.co builds a standard Bootstrap 5 accordion with your own questions and answers, ready to paste into a page.
Frequently asked questions
How do I keep multiple accordion panels open in Bootstrap 5?
Remove the data-bs-parent attribute from each .accordion-collapse element. Without it, panels open and close independently, so users can expand several at once. Bootstrap's documentation calls this the "always open" accordion.
How do I make an accordion item open by default?
Add the .show class to that item's .accordion-collapse element, remove the .collapsed class from its .accordion-button, and set aria-expanded="true" on the button. The panel will then be expanded when the page loads.
Why is my Bootstrap 5 accordion not working?
The most common causes are a missing Bootstrap JavaScript file, a data-bs-target that does not match the collapse element's id, Bootstrap 4 attributes such as data-toggle instead of data-bs-toggle, or duplicate IDs on the page. Check the browser console for errors and confirm the script loads after the HTML or with defer.
Is content inside an accordion bad for SEO?
No, as long as the content is in the page's HTML. Google indexes text inside collapsed sections and, under mobile-first indexing, gives it full weight. Put the most important information outside the accordion, though, since visitors may not open every panel.