An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title gives the user a high level overview of the content allowing the user to decide which sections to read.
Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content.
If a user is likely to read all of the content, don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.
