Bootstrap 5 Accordion and Tabs: Interactive Content Without JavaScript

How the Bootstrap 5 Accordion Works

The Bootstrap 5 accordion is built on the Collapse plugin. Each panel is controlled by a data-bs-toggle="collapse" attribute pointing to a target element. The accordion wrapper ensures only one panel is open at a time by default.

Here’s a working three-panel accordion:

<div class="accordion" id="faqAccordion">

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        What is included in the starter plan?
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        The starter plan includes up to 5 projects, basic analytics, and email support.
      </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="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Can I upgrade my plan later?
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Yes. You can upgrade or downgrade at any time from your account dashboard.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Is there a free trial available?
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        We offer a 14-day free trial with no credit card required.
      </div>
    </div>
  </div>

</div>

The key mechanics: data-bs-parent="#faqAccordion" links all panels to the wrapper so only one expands at a time. Remove that attribute if you want multiple panels open simultaneously. The collapse show class on the first item marks it as open on load.

How Bootstrap 5 Tabs Work

Tabs use the nav-tabs (or nav-pills) component paired with a tab-content container. The connection between tab triggers and panes is made through data-bs-toggle="tab" and matching id / aria-controls values.

<ul class="nav nav-tabs" id="featureTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="design-tab"
      data-bs-toggle="tab"
      data-bs-target="#design"
      type="button" role="tab"
      aria-controls="design"
      aria-selected="true">Design</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="development-tab"
      data-bs-toggle="tab"
      data-bs-target="#development"
      type="button" role="tab"
      aria-controls="development"
      aria-selected="false">Development</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="deployment-tab"
      data-bs-toggle="tab"
      data-bs-target="#deployment"
      type="button" role="tab"
      aria-controls="deployment"
      aria-selected="false">Deployment</button>
  </li>
</ul>


<div class="tab-content" id="featureTabsContent">
  <div class="tab-pane fade show active" id="design"
    role="tabpanel" aria-labelledby="design-tab">
    <p class="mt-3">Pixel-perfect components built for flexibility across every viewport.</p>
  </div>
  <div class="tab-pane fade" id="development"
    role="tabpanel" aria-labelledby="development-tab">
    <p class="mt-3">Clean, semantic HTML with full Bootstrap 5 utility class support.</p>
  </div>
  <div class="tab-pane fade" id="deployment"
    role="tabpanel" aria-labelledby="deployment-tab">
    <p class="mt-3">One-click deploy to any static host — no build tools required.</p>
  </div>
</div>

Swap nav-tabs for nav-pills if you want a rounded button style instead of the underlined tab look. Both work identically under the hood.

Accordion vs. Tabs: When to Use Each

They both hide and reveal content, but they serve different UX purposes.

Use accordions when:

Content items are independent of each other (FAQs, feature descriptions, terms)
Users may need to compare multiple open panels side by side (disable data-bs-parent)
You’re working in a narrow column or sidebar layout
Mobile is the primary context — vertical collapse works better on small screens

Use tabs when:

Content represents distinct categories or steps (Pricing tiers, Before/After, Step 1/2/3)
Only one view makes sense at a time
You want a horizontal layout that mirrors familiar UI patterns (like browser tabs or dashboards)
Labeling is short and scannable (one to three words per tab works best)

A pricing page comparing plans? Tabs. A help center FAQ section? Accordion. A product feature overview with long descriptions? Either works — but accordion handles unequal content lengths more gracefully.

For a deeper look at how these components fit into full page layouts, the guide on Canvas Template Section Patterns: Building Pages Like a Pro covers practical structure decisions across common page types.

Customizing Accordion and Tab Styles

Bootstrap’s defaults are functional but generic. A few CSS overrides go a long way.

Removing the accordion border and background:

.accordion-item {
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0 !important;
}

.accordion-button {
  background-color: transparent;
  font-weight: 600;
  color: #1a1a2e;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #5c6bc0;
  box-shadow: none;
}

Styled pill tabs with custom active state:

.nav-pills .nav-link {
  border-radius: 50px;
  padding: 0.5rem 1.25rem;
  color: #555;
  font-weight: 500;
  transition: all 0.2s ease;
}

.nav-pills .nav-link.active {
  background-color: #5c6bc0;
  color: #fff;
}

Flush accordion variant (built into Bootstrap — no CSS needed):

<div class="accordion accordion-flush" id="flushExample">
  
</div>

The accordion-flush class removes the outer border and rounded corners, giving you a clean list-style collapse that works well inside cards or sidebars.

If you’re building out full typography and spacing for these components, Bootstrap 5 Typography: Font Sizes, Weights, and Display Classes is worth a read alongside this — heading weights inside accordion buttons matter more than most people think.

Accessibility and ARIA Best Practices

Bootstrap builds accessibility in, but you need to follow the markup conventions correctly for it to hold up.

For accordions:

Always use <button> elements as the toggle — not <a> tags
Set aria-expanded="true" on the open panel’s button and "false" on closed ones
Link the button to its panel with aria-controls matching the panel’s id
Wrap each header in an <h2> (or appropriate heading level for your document outline)

For tabs:

Use role="tablist" on the <ul>, role="tab" on each button, and role="tabpanel" on each pane
Set aria-selected="true" on the active tab
Link each tab button to its panel via aria-controls and the panel’s aria-labelledby

Bootstrap’s JavaScript handles keyboard navigation automatically — arrow keys move between tabs, Enter/Space toggles accordions. As long as your markup matches the documented pattern, screen readers and keyboard users get a fully functional experience.

This matters especially in contexts like healthcare or financial platforms where accessibility compliance isn’t optional. The principles covered in Mental Health Platform Website Design Best Practices go into further depth on building inclusive interactive interfaces.

Real-World Use Cases and Patterns

Here’s how these components map to common page sections:

FAQ page → Accordion with accordion-flush, grouped by topic. Open the most common question by default using collapse show.

Pricing page → Tabs for plan tiers (Starter / Pro / Enterprise), each pane containing a feature list and CTA button.

Product features → Nav pills in a horizontal row above a tab content area. Each pane holds a screenshot or short description.

Onboarding steps → Tabs labeled “Step 1”, “Step 2”, “Step 3” — use JavaScript to programmatically advance tabs as the user completes each step (one line of Bootstrap’s Tab API: bootstrap.Tab.getOrCreateInstance(el).show()).

Settings panel → Vertical tabs (flex-column nav-pills with col-3 / col-9 grid layout) — Bootstrap supports this with minor layout adjustments.

<div class="d-flex">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist">
    <button class="nav-link active" data-bs-toggle="pill"
      data-bs-target="#v-pills-account" type="button" role="tab">Account</button>
    <button class="nav-link" data-bs-toggle="pill"
      data-bs-target="#v-pills-billing" type="button" role="tab">Billing</button>
    <button class="nav-link" data-bs-toggle="pill"
      data-bs-target="#v-pills-notifications" type="button" role="tab">Notifications</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-account" role="tabpanel">Account settings go here.</div>
    <div class="tab-pane fade" id="v-pills-billing" role="tabpanel">Billing details go here.</div>
    <div class="tab-pane fade" id="v-pills-notifications" role="tabpanel">Notification preferences go here.</div>
  </div>
</div>

For a broader look at how these components integrate into complete template systems, 8 Bootstrap 5 Card Components You Should Be Using Right Now covers complementary UI building blocks that pair well with tabs and accordions.

✅ Key Takeaways

Bootstrap 5 accordions use data-bs-toggle="collapse" and data-bs-parent to create mutually exclusive panels — no custom JavaScript needed
Bootstrap tabs use data-bs-toggle="tab" with matching id / aria-controls pairs to link triggers and content panes
Accordions suit FAQs and vertical layouts; tabs suit parallel categories and horizontal navigation
Accessibility is built in — but only if you follow the correct markup structure with proper role and aria-* attributes
accordion-flush and nav-pills give you quick style variations without extra CSS
Both components are fully customizable with CSS overrides targeting Bootstrap’s modifier classes

❓ FAQ

Q: Do I need to write any JavaScript to use Bootstrap accordions or tabs?
No. Both components are powered by Bootstrap’s bundled JavaScript plugin. Include bootstrap.bundle.min.js (which includes Popper) in your page and the data-bs-* attributes handle everything. No custom scripts required.

Q: Can I have multiple accordion panels open at the same time?
Yes. Remove the data-bs-parent attribute from each .accordion-collapse element. Without it, panels collapse and expand independently — clicking one won’t close the others.

Q: How do I open a specific tab or accordion panel on page load?
Add collapse show to the accordion panel’s classes (and set aria-expanded="true" on its button). For tabs, add active to the tab button and show active to the corresponding tab pane.

Q: Can I link directly to a specific tab using a URL hash?
Bootstrap doesn’t do this automatically, but it’s achievable with a small snippet that reads window.location.hash on load and triggers the matching tab using bootstrap.Tab.getOrCreateInstance(el).show().

Q: What’s the difference between nav-tabs and nav-pills?
Purely visual. nav-tabs gives you the classic underlined tab style. nav-pills gives you filled rounded buttons. Both use the same data-bs-toggle="tab" mechanism and work identically for content switching.

🚀 Build Faster With Components That Already Work

Bootstrap 5’s accordion and tab components are powerful — but building an entire project from scratch still takes time. Canvas is a premium HTML template that ships with pre-built accordion and tab sections, dozens of layout patterns, and clean component code ready to drop into any project.

Explore Canvas and see what’s included →

If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.