Accordion

Use accordion panels to group related content and show one section at a time.

Overview

Use .accordion as the wrapper and .accordion-item for each section. Inside each item, use .accordion-header, .accordion-button, .accordion-button-toggle, and .accordion-body.

Accordion interaction uses Bootstrap Collapse. Add data-bs-toggle="collapse" and data-bs-target="#panel-id" to each .accordion-button, then use .accordion-collapse.collapse on the target panel. Use .show on the panel that should be open by default.

This preview shows the base structure with one expanded section.

Update profile fields, contact details, and team role settings in this section.

Configure password policy, two-factor requirements, and active device sessions.

Choose which updates to receive by email, browser push, and weekly digest. You can set separate rules for account alerts and product announcements.

<div class="accordion" id="accordion-overview">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-1" aria-expanded="true" aria-controls="overview-item-1"> Account details <span class="accordion-button-toggle">
          <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="overview-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-overview">
      <div class="accordion-body">Update profile fields, contact details, and team role settings in this section.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-2" aria-expanded="false" aria-controls="overview-item-2"> Security settings <span class="accordion-button-toggle">
          <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="overview-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-overview">
      <div class="accordion-body">Configure password policy, two-factor requirements, and active device sessions.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-3" aria-expanded="false" aria-controls="overview-item-3"> Notification preferences <span class="accordion-button-toggle">
          <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="overview-item-3" class="accordion-collapse collapse" data-bs-parent="#accordion-overview">
      <div class="accordion-body"> Choose which updates to receive by email, browser push, and weekly digest. You can set separate rules for account alerts and product announcements. </div>
    </div>
  </div>
</div>

Variants

Plus toggle icon

Use .accordion-button-toggle-plus to hide the first SVG path when expanded. This pattern is useful for plus-to-minus toggles.

View invoices, payment method status, and tax details.

<div class="accordion" id="accordion-plus">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#plus-item-1" aria-expanded="true" aria-controls="plus-item-1"> Billing details <span class="accordion-button-toggle accordion-button-toggle-plus">
          <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M12 5l0 14" />
            <path d="M5 12l14 0" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="plus-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-plus">
      <div class="accordion-body">View invoices, payment method status, and tax details.</div>
    </div>
  </div>
</div>

With leading icon

Use .accordion-button-icon when a row needs a small icon before the label. The icon color uses the secondary token.

Manage member names, avatars, and workspace profile details.

<div class="accordion" id="accordion-icon">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#icon-item-1" aria-expanded="true" aria-controls="icon-item-1">
        <span class="accordion-button-icon">
          <!-- Download SVG icon from http://tabler.io/icons/icon/user -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
          </svg>
        </span> Team profile<span class="accordion-button-toggle">
          <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="icon-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-icon">
      <div class="accordion-body">Manage member names, avatars, and workspace profile details.</div>
    </div>
  </div>
</div>

Flush accordion

Use .accordion-flush to remove side borders and border radius. The first and last items also remove top and bottom borders.

Generate tokens and control access scopes.

Manage delivery URLs, retry policy, and event subscriptions.

<div class="accordion accordion-flush" id="accordion-flush">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-1" aria-expanded="true" aria-controls="flush-item-1"> API access <span class="accordion-button-toggle">
          <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="flush-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-flush">
      <div class="accordion-body">Generate tokens and control access scopes.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-2" aria-expanded="false" aria-controls="flush-item-2"> Webhooks <span class="accordion-button-toggle">
          <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="flush-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-flush">
      <div class="accordion-body">Manage delivery URLs, retry policy, and event subscriptions.</div>
    </div>
  </div>
</div>

Examples

Tab-like spacing

Use .accordion-tabs to add a gap between items and keep full borders around each item. This style works well for settings pages.

Configure workspace name, slug, and timezone.

Control email, push, and digest notification preferences.

<div class="accordion accordion-tabs" id="accordion-tabs">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#tabs-item-1" aria-expanded="true" aria-controls="tabs-item-1"> Workspace <span class="accordion-button-toggle">
          <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="tabs-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-tabs">
      <div class="accordion-body">Configure workspace name, slug, and timezone.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tabs-item-2" aria-expanded="false" aria-controls="tabs-item-2"> Notifications <span class="accordion-button-toggle">
          <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="tabs-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-tabs">
      <div class="accordion-body">Control email, push, and digest notification preferences.</div>
    </div>
  </div>
</div>

Inverted toggle position

Use .accordion-inverted to move the toggle to the start of the button row. This helps layouts where controls should appear before text.

Set default policy, invite flow, and sign-in restrictions.

<div class="accordion accordion-inverted" id="accordion-inverted">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#inverted-item-1" aria-expanded="true" aria-controls="inverted-item-1"> Access policy <span class="accordion-button-toggle">
          <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M6 9l6 6l6 -6" />
          </svg>
        </span>
      </button>
    </h2>
    <div id="inverted-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-inverted">
      <div class="accordion-body">Set default policy, invite flow, and sign-in restrictions.</div>
    </div>
  </div>
</div>

Accessibility

Use a real <button> element for .accordion-button.
Keep heading structure with .accordion-header so sections are easy to scan.
Use aria-expanded and aria-controls on toggle buttons when wiring interactive behavior.
Keep data-bs-target and panel id values in sync for every toggle.
Keep visible focus styles. The header and button styles include focus handling.
Add meaningful text labels, not only icons.

SCSS variables

Use these SCSS variables to customize the accordion. The default values are:

$accordion-padding-y: 1rem;
$accordion-padding-x: 1.25rem;
$accordion-border-width: var(--border-width);
$accordion-border-radius: var(--border-radius);
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width);
$accordion-btn-toggle-width: $icon-size;

$accordion-body-padding-y: $accordion-padding-y;
$accordion-body-padding-x: $accordion-padding-x;

$accordion-button-padding-y: $accordion-padding-y;
$accordion-button-bg: transparent;
$accordion-button-active-color: inherit;
$accordion-btn-gap: 0.75rem;
$accordion-header-gap: 1rem;
$accordion-tabs-gap: 0.75rem;
$accordion-btn-focus-box-shadow: $focus-ring-box-shadow;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`accordion`	component	Container element
`accordion-item`	part	One collapsible section
`accordion-header`	part	Heading that holds the toggle button
`accordion-button`	part	The toggle itself
`accordion-body`	part	Panel revealed when the section opens
`accordion-button-toggle`	style	Chevron indicator on the toggle
`accordion-button-toggle-plus`	style	Plus and minus indicator instead of a chevron
`accordion-flush`	modifier	Removes the outer border and rounding, to sit flush in a parent
`accordion-inverted`	modifier	Moves the toggle indicator to the start of the header
`accordion-tabs`	modifier	Styles the headers as a row of tabs

Menu

Accordion

Overview

Variants

Plus toggle icon

With leading icon

Flush accordion

Examples

Tab-like spacing

Inverted toggle position

Accessibility

SCSS variables

Class reference

On this page

130 sleek illustrations for your startup's visual identity.

Menu

Accordion

Overview

Account details

Security settings

Notification preferences

Variants

Plus toggle icon

Billing details

With leading icon

Team profile

Flush accordion

API access

Webhooks

Examples

Tab-like spacing

Workspace

Notifications

Inverted toggle position

Access policy

Accessibility

SCSS variables

Class reference

Related

On this page

130 sleek illustrations for your startup's visual identity.