Accordion

An accordion is a clickable component that reveals or hide content associated with it. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore. Collapsing the page minimizes scrolling, and the headings serve as a mini-IA of the page, this allows users to form a mental model of the information available.

Best practices

• Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. Better to show all page content at once when the use case supports it.
• Make sure to optimize your pages for printing. Accordions are often not well suited for printing documents and require people to print snippets of content at a time.
• In tables, in situations where the list has only some expandable items, the items that do not use the accordion should have the same indentation as the others. When applied to cards, it is not necessary to maintain text alignment.

This component hasn't yet been implemented as a react component.