Details
<gcds-details>

Also called: accordion, collapse.

Details is an interactive switch for a person to expand or collapse content.

• GitHub
• Figma

Build a details component

Use the details component to give a person a summary of content you've hidden that they can choose to reveal.

Use details to let a person toggle the display of additional content related to the details title.

Coding and accessibility for details

Present the details component to support understanding

The details component can add to a person's cognitive load when it:

1. Interrupts the flow of reading or scrolling.
2. The content they need is difficult to find and search.
3. They are unfamiliar with the expand and collapse function.

To help a reader's experience accessing details content:

• Use the open attribute to define if the details content is open by default or not.
• Make details titles clearly state what the content's about. Avoid non-descriptive titles such as "Read more". Instead, opt for a specific and descriptive summary, like "Maximum coverage amount for your physio benefit".
• Make titles distinct so people know the difference. Identical or similar titles can be confused.
• Avoid placing one details component inside another, where no one would know to look for that content.
• Make details content searchable.

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.