Accordion

Bootstrap 5.3 .accordion patterns: single-open, flush, multi-open, accent, compact, outline, success, badges, disabled items, and rich bodies. Toggle the navbar theme — components use Bootstrap variables and adapt automatically.

Interactive reference

Use standard markup (accordion-item, accordion-header, accordion-button, accordion-collapse) for accessibility: real buttons, aria-expanded, and optional data-bs-parent for exclusive open behavior.

BS 5.3+ Official docs

Standard — one panel open

Each .accordion-collapse includes data-bs-parent="#accordionStd" so opening a section closes the others.

Elementer is a Bootstrap shortcode pack for rapid UI demos. This page showcases the native Bootstrap 5 accordion — no custom collapse scripts required; behavior comes from bootstrap.bundle.min.js.

The site sets data-bs-theme="dark"|"light" on <html>. Bootstrap maps that to CSS variables, so borders, backgrounds, and accordion chrome stay readable in both themes without duplicate markup.

Yes. Put lists, alerts, or small forms inside .accordion-body. Keep headings logical: use h3 (or h2) for each .accordion-header to preserve outline order on the page.

Flush — no outer radius

Add .accordion-flush when the accordion sits flush inside a card or modal; side borders are removed per Bootstrap defaults.

Orders ship within two business days. Tracking is emailed as soon as the carrier scans the package.

Unused items in original packaging may be returned within 30 days. Refunds post after warehouse inspection.

Reach the team via the contact form or live chat during business hours (9–5, local time).

Multi-open — omit data-bs-parent

Without a parent id, each collapse is independent — useful for specs, legal clauses, or long reference lists.

Open multiple sections at the same time. This pattern does not use data-bs-parent on the collapse regions.

Try expanding both A and B together. Keyboard users still get focus management from Bootstrap’s collapse plugin.

Use .accordion-body padding for readable line length; avoid fixed pixel colors so dark mode stays balanced.

Accent + icons

Template class .accordion-accent tints the open header; icons use Font Awesome 6 (fas).

Copy any block from this page into your project. Ensure bootstrap.bundle.min.js loads after the DOM (or initialize collapse if you bundle differently).

Override --bs-accordion-* variables in your CSS for global changes, or scope variants with a wrapper class like .accordion-accent.

Prefer <button> toggles (as here) over anchor-only triggers. Pair aria-expanded and aria-controls with stable ids on the collapsible region.

All collapsed initially

Every .accordion-collapse omits show; each .accordion-button uses collapsed and aria-expanded="false". Still use data-bs-parent for a single-open group.

Starter, Pro, and Enterprise plans differ by seats, API limits, and SLA. Compare the matrix on the pricing page.

Net-30 billing by default. Annual prepay unlocks a discount; POs accepted for Enterprise.

Choose EU or US hosting at signup. Migration between regions is available with support-assisted planning.

Compact .accordion-sm

Bootstrap does not ship a small accordion; this template adds tighter padding and type for sidebars, filters, or dense settings panels.

Narrow results by date range, status, or owner. Combine rules; counts update live.

Toggle visibility for SKU, stock, and margin columns. Layout persists per user.

CSV and XLSX exports respect current filters and column selection.

Outline — spaced items

Wrapper .accordion-outline adds a border per item and keeps collapsed headers visually light; open headers use --bs-secondary-bg so light/dark both work.

Rename the workspace, set the default timezone, and configure retention for activity logs.

Invite by email, assign roles (Admin, Editor, Viewer), and revoke access instantly.

Connect Slack, webhooks, or SSO. OAuth tokens encrypt at rest.

Success tint .accordion-success

Same API as .accordion-accent, mapped to Bootstrap’s success tokens (--bs-success-rgb, --bs-success-text-emphasis).

Lint, unit tests, and bundle size gates all succeeded on the latest commit.

Blue/green rollout with automatic rollback if health checks fail after traffic shift.

Dashboards cover latency, error rate, and saturation; alerts route to PagerDuty.

Badges in headers + disabled item

Use a flex row inside the button: title with flex-grow-1, then a .badge. The third item uses a disabled button (no collapse region) per Bootstrap’s pattern.

Unread mentions, failed jobs, and billing reminders surface here. Mark all read or drill into each thread.

Experimental features may change without notice. Disable labs anytime from this panel.

Rich bodies — nested UI

Bodies can contain alerts, lists, buttons, or forms; use Bootstrap utilities and keep contrast theme-safe (text-bg-*, alert).

Complete steps in any order; progress saves automatically.
  • Verify email and enable two-factor authentication.
  • Connect your first data source.
  • Invite at least one teammate.

Tab moves focus; Enter or Space toggles the focused header when it is a button.

Focus visible ARIA expanded