Accordion

An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full

Best Practices

When to use

• Providing users more content within the same layout
• Displaying content that is directly related, or supplemental, to the main subject of the page
• Designing with limited vertical space and there is enough content to condense
• To organize related information.
• To shorten pages and reduce scrolling when content is not crucial to read in full.
• When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.

When not to use

• Linking a title to another page. Instead, use Links
• Designing with sparse content. Instead, use Lists
• Content is lengthy. Instead, use Tabs