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

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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>

Default

Account details

Manage your account settings and preferences.

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-3xl | 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>
    <p class="tng-text-body">
      Your personal information is kept private and secure.
    </p>
  </details>
  <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>

Default

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.

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.

Accessibility

Semantic markup

The accordion leverages <details> and <summary>, which provide built-in accessibility:

• Enter and Space toggle the panel.
• The browser exposes the expanded / collapsed state to assistive technologies automatically.
• No ARIA attributes are needed when using native elements.

Note

If you build a custom accordion without <details>, you must manage aria-expanded on the trigger, aria-controls pointing to the panel id, and keyboard interaction yourself. Prefer the native elements whenever possible.

Accordion group

• Use the name attribute on <details> elements to create an exclusive accordion group (only one open at a time).
• Mark decorative icons (like the chevron) with aria-hidden="true" so screen readers skip them.