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 bg-surface">
    <h3 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>
    </h3>
    <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 bg-surface">
    <h3 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>
    </h3>
    <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 bg-surface">
    <h3 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>
    </h3>
    <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 with a plus icon. When the section opens, the toggle rotates a quarter turn and the plus becomes a close icon. It rotates the whole toggle, so it works with an inline SVG, a sprite <use> or an icon font.

View invoices, payment method status, and tax details.

<div class="accordion" id="accordion-plus">
  <div class="accordion-item bg-surface">
    <h3 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>
    </h3>
    <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 bg-surface">
    <h3 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>
    </h3>
    <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 bg-surface">
    <h3 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>
    </h3>
    <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 bg-surface">
    <h3 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>
    </h3>
    <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 bg-surface">
    <h3 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>
    </h3>
    <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 bg-surface">
    <h3 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>
    </h3>
    <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 bg-surface">
    <h3 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>
    </h3>
    <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.

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 indicator that turns into a close icon when open
`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

CSS

Variables

The component uses local CSS variables on .accordion for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/ui/_accordion.scss.

--accordion-color: var(--body-color);
--accordion-border-color: var(--border-color);
--accordion-border-radius: #{$accordion-border-radius};
--accordion-inner-border-radius: #{$accordion-inner-border-radius};
--accordion-padding-x: #{$accordion-body-padding-x};
--accordion-gap: 0;
--accordion-active-color: #{$accordion-button-active-color};
--accordion-btn-color: var(--accordion-color);
--accordion-btn-bg: #{$accordion-button-bg};
--accordion-btn-toggle-width: #{$accordion-btn-toggle-width};
--accordion-btn-padding-x: var(--accordion-padding-x);
--accordion-btn-padding-y: #{$accordion-button-padding-y};
--accordion-btn-font-weight: var(--font-weight-medium);
--accordion-btn-line-height: #{$accordion-button-line-height};
--accordion-body-padding-x: var(--accordion-padding-x);
--accordion-body-padding-y: #{$accordion-body-padding-y};
--accordion-btn-gap: #{$accordion-btn-gap};
--accordion-header-gap: #{$accordion-header-gap};

Sass variables

Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.

$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-line-height: 1.25rem;
$accordion-button-bg: transparent;
$accordion-button-active-color: inherit;
$accordion-btn-gap: 0.75rem;
$accordion-header-gap: 1rem;
$accordion-tabs-gap: 0.75rem;

Menu

Accordion

Overview

Variants

Plus toggle icon

With leading icon

Flush accordion

Examples

Tab-like spacing

Inverted toggle position

Accessibility

Class reference

CSS

Variables

Sass variables

On this page

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

Class reference

CSS

Variables

Sass variables

Related

On this page

Get Admin Template, Icons, Illustrations and Emails in one bundle.