Accordion

Accordions are collapsible content containers that let users reveal or hide sections of content. They reduce cognitive load by surfacing only the most relevant content on first glance and letting users choose how deep to dig.

Design

This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet, and desktop — with no alternative versions required.

When to use it (and when not to)

Use the accordion when:

• You need to present several groups of related information, but not all of it needs to be visible at once.
• You want to reduce visual clutter and keep the page easier to scan.
• Users may only need to access some details depending on their specific needs or interests.
• You want to avoid long scrolling, especially on mobile devices or content-dense pages.
• The content in each section can be understood independently from the rest.

Avoid the accordion when:

• The content is essential for understanding the page and should remain visible without interaction.
• Users need to compare information across multiple sections at the same time.
• The page only contains one section of information (in that case, display it directly).
• Frequent opening and closing would interrupt the user’s workflow or slow them down.

Properties

State: Collapsed by Contrast

Icon and title

Width: 212

Title

Text color:

color-foreground-contrast-emphasis#ffffff

color-foreground-contrast-emphasis#ffffff

Line

Background color:

color-border-contrast-default#d4d2d1

color-border-contrast-default#e4e4e4

Accordion

Width: 312

Border radius: 0

False

Title

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Line

Background color:

color-border-neutral-muted#999999

color-border-neutral-muted#a8aaac

State: Expanded by Contrast

True

Icon and title

Width: 212

Title

Text color:

color-foreground-contrast-emphasis#ffffff

color-foreground-contrast-emphasis#ffffff

Line

Background color:

color-border-contrast-emphasis#ffffff

color-border-contrast-emphasis#ffffff

Text

Text color:

color-foreground-contrast-default#fbfbfc

color-foreground-contrast-default#fbfbfc

False

Title

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Line

Background color:

color-border-neutral-muted#999999

color-border-neutral-muted#a8aaac

Text

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

State: Hover by Contrast

True

Icon and title

Width: 212

Title

Text color:

color-foreground-contrast-emphasis#ffffff

color-foreground-contrast-emphasis#ffffff

Line

Background color:

color-border-contrast-emphasis#ffffff

color-border-contrast-emphasis#ffffff

False

Title

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Line

Background color:

color-border-neutral-default#282830

color-border-neutral-default#282830

State: Focus by Contrast

True

Accordion

Border color:

color-border-focus-contrast-default#ffffff

color-border-focus-contrast-default#60a7ff

Border weight: 2

Border radius: 2

Accordion

Contrast: True

False

Accordion

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Border weight: 2

Border radius: 2

Accordion

Contrast: False

Styling

Colors

Name	Applied as	Applied to
color-foreground-contrast-emphasis	Text color	Accordion Title
color-foreground-contrast-emphasis	Text color	Accordion Title
color-foreground-contrast-default	Text color	Accordion Title
color-foreground-contrast-default	Text color	Accordion Title
color-foreground-contrast-muted	Text color	Accordion Title
color-foreground-contrast-muted	Text color	Accordion Title
color-foreground-neutral-default	Text color	Accordion Title
color-foreground-neutral-default	Text color	Accordion Title
color-foreground-neutral-emphasis	Text color	Accordion Title
color-foreground-neutral-emphasis	Text color	Accordion Title
color-foreground-neutral-muted	Text color	Accordion Title
color-foreground-neutral-muted	Text color	Accordion Title
color-foreground-neutral-subtle	Text color	Accordion Title
color-foreground-neutral-subtle	Text color	Accordion Title
color-border-neutral-muted	Border color	Line
color-border-neutral-muted	Border color	Line
color-border-neutral-default	Border color	Line
color-border-neutral-default	Border color	Line
color-border-contrast-default	Border color	Line
color-border-contrast-default	Border color	Line
color-border-contrast-emphasis	Border color	Line
color-border-contrast-emphasis	Border color	Line
color-border-contrast-subtle	Border color	Line
color-border-contrast-subtle	Border color	Line

Text styles

Name	Applied as	Applied to
Lorem Ipsum typography-body-6	Text style	Text
Lorem Ipsum typography-body-6	Text style	Text
Lorem Ipsum typography-body-6 (emphasis)	Text style	Accordion Title
Lorem Ipsum typography-body-6 (emphasis)	Text style	Accordion Title

Usage

Do

Guidance on how to use a component.

• Use it to organize and display content progressively, allowing users to reveal or hide information as needed.
• Help reduce cognitive overload by showing only the most relevant content at first glance.
• Use when the user does not need to see all information at once, or when content is grouped by topics or categories.
• Maintain consistent spacing between accordions to support scannability and visual rhythm.
• Use clear and descriptive titles for accordion headers to communicate their purpose.
• When multiple accordions are used, consider whether they should expand independently or as a single-item expansion group (only one open at a time).
• Keep animations smooth and consistent across variants and themes.
• Verify that keyboard navigation and focus indicators work properly across all accordion items.

Don’t

Guidance on what to avoid when using a component.

• Don’t use accordions to hide critical or frequently needed information. If users must always see the content, it shouldn’t be collapsible.
• Avoid nesting accordions inside other accordions, as it complicates navigation and accessibility.
• Don’t use too many accordion items in one view — it may cause scroll fatigue and reduce clarity.
• Don’t rely on animation alone to signal state change — always provide clear visual or semantic cues.
• Don’t rely solely on colour or icons to indicate the open/closed state — always include a clear visual cue (e.g. arrow rotation).
• Don’t remove or modify focus states that help users understand where they are when navigating with a keyboard.
• Avoid using accordions in layouts with minimal vertical space, where content expansion will disrupt the structure.

Best practices

Guidance on where this component has been used

Structure and behavior

• Each accordion item should contain a title (trigger) and a content area (panel).
• Titles must be keyboard-focusable and toggle their state using Enter or Space.
• Only one interactive element should control the expansion to ensure proper accessibility.
• The expand/collapse icon must rotate or animate consistently to reinforce the state change.
• Maintain minimum touch target areas (44×44 px) for mobile/touch devices.

Content and copy

• Keep titles short and scannable, typically one line.
• Start titles with keywords that help users quickly identify the content.
• Use sentence case for readability (e.g. “Account details” instead of “ACCOUNT DETAILS”).
• When possible, use parallel structure across accordion titles (e.g. all start with verbs or nouns).

Accessibility

• Accordions should use ARIA roles and attributes such as aria-expanded, aria-controls, and aria-labelledby.
• Ensure all states (collapsed, expanded, hover, focus) meet WCAG 2.1 AA contrast standards.
• All accordions must be fully operable via keyboard and navigable using Tab, and toggle them with Enter or Space.
• When an accordion expands, focus should remain on the header for context retention.
• Avoid disabling accordion headers unless necessary — they communicate interactiveness by design.

Develop

Styles

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.

React

Import the Accordion and AccordionItem components from @tmedxp/react-components.

Properties

AccordionProperties extends PropsWithChildren<ComponentProps<'div'>>, meaning it includes all standard HTML attributes that can be applied to a <div>.

Prop	Type	Description	Optional
className	string	Custom classNames you want to apply to the accordion.	✅
children	React.ReactElement<typeof AccordionItem> | React.ReactElement<typeof AccordionItem>[]	Set of accordion items.	❌
hasDivider	boolean	Display or not a divider. Displayed by default.	✅

AccordionItem properties

AccordionItemProperties extends PropsWithChildren<ComponentProps<'details'>>, meaning it includes all standard HTML attributes that can be applied to a <details>.

Prop	Type	Description	Optional
className	string	Custom classNames you want to apply to the accordion.	✅
title	string	The accordion title.	❌
iconName	IconProperties['name']	The accordion icon name.	✅
children	React.ReactElement	The accordion content.	❌
open	boolean	HTML property. Defines the initial accordion state.	✅

Example

import { Accordion, AccordionItem } from '@tmedxp/react-components';

const ExampleAccordion = (items) => {
  return (
    <Accordion id="accordion-simple">
      {items.map((item, key) => (
        <AccordionItem
          key={key}
          title={item.title}
          name={item.name}
          open={item.open}
          hasDivider={item.hasDivider}
          iconName={item.iconName}
        >
          <div dangerouslySetInnerHTML={{ __html: item.HTMLContent }} />
        </AccordionItem>
      ))}
    </Accordion>
  );
};

export { ExampleAccordion };

Accessibility

Quick summary

• The accordion must be fully operable with the keyboard. Users should be able to navigate to the header and toggle it using Enter or Space.
• The header must behave as an interactive element with a clear focus state, so users can easily see where they are.
• Open and closed states must be communicated both visually and programmatically. This includes a clear change in icon direction or state indicator, and appropriate ARIA attributes (aria-expanded, aria-controls).
• The content panel should be associated with its header via unique IDs for clear screen-reader navigation.
• Text and icon contrast must meet WCAG AA standards to support readability in different environments.
• The component should follow consistent spacing, typography, and motion guidelines from the design system to reinforce predictable behavior across the interface.

For designers

• All accordion states (collapsed, expanded, hover, and focus) must maintain accessible contrast in both light and dark background contexts.
• Focus styles must remain visible and meet WCAG AA contrast requirements across all supported surfaces. Focus should be clearly distinguishable from hover.
• Interaction feedback (hover, expanded) must use more than colour alone to convey state — for example icon rotation, border emphasis, or background changes.
• Colour tokens used within the accordion should be semantic (e.g. color-foreground-neutral-default) rather than fixed values. This ensures the accordion adapts correctly to different themes or surfaces.
• The icon indicating the open/closed state must have a clear and consistent visual transformation (e.g. rotation) and should not rely on colour alone.

Contrast compliance — Toyota

State	Label colour	Border colour	Contrast ratio	Passes WCAG AA?
Rested	#FFFFFF	#282830	11.5:1	✅ Yes
Hover	#15151B	#A8AAAC	11.5:1	✅ Yes
Expanded	#15151B	#282830	11.5:1	✅ Yes

For developers

The accordion leverages native <details> and <summary> elements, 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 required 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’s 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.

Implementation checklist

To meet WCAG 2.1 AA and support assistive technologies, follow these implementation standards:

1. Semantic HTML
   • Prefer <details> + <summary>. If building a custom accordion, use a semantic <button> for the header — do not use <div> or <span> with click handlers.
   • The content region must be associated with the header via aria-controls and aria-expanded.
2. Keyboard navigation
   • Accordion headers must be reachable via Tab.
   • Panels must toggle open/closed with Enter and Space.
   • If the accordion is part of a multi-expand list, arrow-key navigation may be supported as an enhancement.
3. Screen-reader support
   • The header text must clearly describe the content it controls.
   • The panel may use role="region" and reference the header with aria-labelledby or aria-controls.
   • Icon-only headers are not permitted; they must include visible text or an accessible label.
4. Interaction feedback
   • Expanded state must be announced via aria-expanded.
   • Visual changes should reinforce state (icon rotation, background, border).
   • Avoid relying solely on colour to indicate open/closed status.
5. Responsive and tap targets
   • The accordion header’s interactive area must be at least 44 px in height to support touch accessibility.

Good vs bad

Case	✅ Good	❌ Bad
Semantic structure	<button aria-expanded="true">…	<div onclick="toggle()">…
Keyboard navigation	Toggles using Enter / Space	Only toggles with pointer click
Focus visibility	Clear, high-contrast focus ring	Focus removed or replaced by hover-only styling
Open/closed state	Icon rotation + aria-expanded + background shift	Only colour change with no semantic state