Accordion

Accordions are collapsible content containers that allow users to show or hide sections of content. They help reduce cognitive overload by displaying only the most relevant content at first glance.

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>

Default
Contrast

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Elements

Divider

<details class="tng-accordion has-divider">
  <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>

Default
Contrast

Account details

Manage your account settings and preferences.

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>

Default
Contrast

Account details

Manage your account settings and preferences.

Recipes

Accordion Group

Multiple accordions can be stacked using .tng-stack.

<div class="tng-stack gap-3xl">
  <details class="tng-accordion has-divider" 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>
    <p class="tng-text-body">
      Your personal information is kept private and secure.
    </p>
  </details>
  <details class="tng-accordion has-divider">
    <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 has-divider">
    <summary class="tng-accordion-trigger">
      <i class="tng-icon icon-help" 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>

Default
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.