Bootstrap 5Content

Bootstrap 5 Accordion

The Bootstrap 5 accordion is a collapsible content panel component that shows one (or multiple) panels at a time. It's most commonly used for FAQ sections, but also for product feature lists, navigation menus, and settings panels. Built on the Collapse plugin, no extra JavaScript required.

Bootstrap class

.accordion

Common use cases

FAQ sections
Collapsible feature lists
Settings panels
Step-by-step guides
Product specification lists
Mobile navigation menus

Variants and classes

Variant	Description and classes	Classes
Default accordion	Only one panel open at a time.`accordion + accordion-item + accordion-header + accordion-button + accordion-collapse`	`accordion + accordion-item + accordion-header + accordion-button + accordion-collapse`
Always open accordion	Each item opens independently because the collapses have no data-bs-parent.`accordion + accordion-collapse without data-bs-parent`	`accordion + accordion-collapse without data-bs-parent`
Flush accordion	No border or rounded corners. Sits flat in parent.`accordion accordion-flush`	`accordion accordion-flush`
Borderless FAQ style	Custom styled FAQ with no visible accordion borders.`accordion accordion-flush + border-0`	`accordion accordion-flush + border-0`

Code example

HTML

<div class="accordion" id="faqAccordion">
  <div class="accordion-item border-0 mb-2 rounded-3 overflow-hidden shadow-sm">
    <h2 class="accordion-header">
      <button class="accordion-button fw-semibold" type="button"
        data-bs-toggle="collapse" data-bs-target="#faq1">
        What is Canvas Builder?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
      <div class="accordion-body text-muted">
        Canvas Builder is an AI-powered HTML generator that creates
        production-ready Bootstrap 5 layouts from a text description.
      </div>
    </div>
  </div>
  <div class="accordion-item border-0 mb-2 rounded-3 overflow-hidden shadow-sm">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed fw-semibold" type="button"
        data-bs-toggle="collapse" data-bs-target="#faq2">
        How long does generation take?
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
      <div class="accordion-body text-muted">
        A single page takes about 3 minutes.
        A complete multi-page site takes 5 to 10 minutes.
      </div>
    </div>
  </div>
</div>

Live examples

FAQ Accordion

Flush accordion: one item open at a time, click a question to switch.

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

Icon accordion with coloured icon per item
Numbered accordion steps
Borderless FAQ with custom chevron icon
Accordion with image in body panel
Full-width flush accordion for settings

Best practices

Add accordion-flush for FAQ sections on white backgrounds

The default accordion has a border and background. accordion-flush removes these, giving a cleaner look when the accordion sits on a white or light-coloured section.

Use FAQ schema with accordion FAQ sections

An accordion used as a FAQ section can carry FAQPage JSON-LD, but Google stopped showing FAQ rich results in May 2026, so it no longer adds dropdowns in search. Put the effort into clear, genuinely useful answers in the visible text.

Open the first item by default

Start with the first accordion-collapse having the show class and the first accordion-button without the collapsed class. This shows users the component is interactive and the content is immediately accessible.

FAQ

How do I make all Bootstrap 5 accordion panels open at once?

Remove the data-bs-parent attribute from each accordion-collapse div. This decouples the panels so opening one doesn't close others.

Does Bootstrap 5 accordion have SEO implications?

Collapsed accordion content IS indexed by Google. FAQPage schema is optional since Google stopped showing FAQ rich results in May 2026; if you add it, it must match the visible questions and answers.