Accordion Component

An accordion is a vertical list which the user can choose to hide (collapse) or show (expand) the detailed extended contents.

Accordion Variations

Collapsed
Accordion Item 1 Donut caramels sweet roll bonbo
Contents are hidden, only show the title label.

Guideline

• On default, all accordion lists are in a collapsed state.
• Define in the beginning to enable multiple expand or just one expand at a time.
• Multiple expand: ideal for comparing between each content categories.
•One expand at a time: less scrolling, ideal for user action.

When to use

• Group related contents with content title label on top.
• Be used for information that is lower priority or users don’t need to see all the time.

When not to use

• For showing critical system information or a primary action to be taken (for example, error, warnings, confirmation or cancel button)
• Having complex navigational component on the content (for example, tabs or dropdown)
• Nesting accordion inside an accordion

Code