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>Accordion title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Accordion title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Elements
Section titled “Elements”Divider
Section titled “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>Account details
Manage your account settings and preferences.
Account details
Manage your account settings and preferences.
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>Account details
Manage your account settings and preferences.
Account details
Manage your account settings and preferences.
Recipes
Section titled “Recipes”Accordion Group
Section titled “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>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.
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.