CSS

The accordion can leverage <details> and <summary> elements, providing built-in expand/collapse behavior without JavaScript.

<details class="tng-accordion">
  <summary class="tng-accordion-trigger">
    <span>Accordion title</span>
    <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
  </summary>
  <p class="tng-text-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</details>

Neutral
Contrast

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Elements

Icon

Add an icon before the title for visual context.

<details class="tng-accordion">
  <summary class="tng-accordion-trigger">
    <i class="tng-icon icon-profile" aria-hidden="true"></i>
    <span>Account details</span>
    <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
  </summary>
  <p class="tng-text-body">
    Manage your account settings and preferences.
  </p>
</details>

Neutral
Contrast

Account details

Manage your account settings and preferences.

Modules

Accordion group

Multiple accordions can be stacked using our flex layout, optionally adding a divider.

<div
  class="tng-stack gap-none align-items-stretch | tng-has-dividers"
>
  <details class="tng-accordion" open>
    <summary class="tng-accordion-trigger">
      <i class="tng-icon icon-profile" aria-hidden="true"></i>
      <span>Personal information</span>
      <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
    </summary>
    <div class="tng-slot is-primary"></div>
    <p class="tng-text-body">
      Your personal information is kept private and secure.
    </p>
  </details>
  <button
    class="tng-button is-lg is-tertiary is-ghost pb-xl | justify-content-space-between"
  >
    Inline Button
    <i class="tng-icon icon-external-link" aria-hidden="true"></i>
  </button>
  <details class="tng-accordion">
    <summary class="tng-accordion-trigger">
      <i class="tng-icon icon-settings" aria-hidden="true"></i>
      <span>Settings</span>
      <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
    </summary>
    <p class="tng-text-body">
      Configure your preferences and settings.
    </p>
  </details>
  <details class="tng-accordion">
    <summary class="tng-accordion-trigger">
      <i class="tng-icon icon-info" aria-hidden="true"></i>
      <span>Help & Support</span>
      <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
    </summary>
    <p class="tng-text-body">
      Get help with common issues and contact support.
    </p>
  </details>
</div>

Neutral
Contrast

Personal information

Your personal information is kept private and secure.

Settings

Configure your preferences and settings.

Help & Support

Get help with common issues and contact support.