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.

Primary Class

.accordion

Common Use Cases

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

Variants & Classes

Variant	Description	Classes
Default accordion	Only one panel open at a time.	`accordion + accordion-item + accordion-header + accordion-button + accordion-collapse`
Always open accordion	Multiple panels can be open simultaneously.	`Remove data-bs-parent from each collapse div`
Flush accordion	No border or rounded corners — sits flat in parent.	`accordion accordion-flush`
Borderless FAQ style	Custom styled FAQ with no visible accordion borders.	`accordion accordion-flush + custom CSS overrides`

Code Example

<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">
        Most full-page layouts generate in approximately 3 minutes.
        Single block generation takes under 60 seconds.
      </div>
    </div>
  </div>
</div>

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓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

Any accordion used as a FAQ section should have FAQPage JSON-LD schema markup. This enables Google rich results (FAQ dropdowns in search) and can significantly increase CTR from search results.

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. Adding FAQPage schema to accordion-based FAQ sections enables FAQ rich results in search, which can increase click-through rates.