Accordion panels are containers for content of relative importance to the user that can be selectively expanded or collapsed. They can be useful for reducing the content on a page & the cognitive load for the user.
accordion panel can display different types of content such as text, images, tables, media, buttons, etc. Components are added into the drop zone and render when the user expands the corresponding panel.
When to use:
Edit the code below to see your changes live!
Choose meaningful headers that describe the content revealed on expand.
Use the icon prop sparingly; an appropriate use would be the status of a task hidden in the accordion.
Use accordions to present parallel content or like items.
Limit the number of tasks hidden in each accordion to one.
Start with all panels collapsed unless the user has been redirected to the content.
Do not use accordions to hide important user tasks.
Do not use the icon prop unless it provides benefit to the user.
Do not nest accordions within accordions.
Do not use an accordion to hide a singular piece of content.