| Property | Values | Default |
|---|---|---|
| Open Variant | True | False | False |
| Interaction State Variant | Default | Hover | Active | Default |
Accordion vs. Collapse
|
Component |
Use when |
Strengths |
Don’t use when |
|---|---|---|---|
|
Accordion |
You need to organize multiple related sections of content that users may expand or collapse individually. |
Keeps long content structured and scannable, allows one or more panels open at once. |
If there’s only a single block of content → use Collapse. If the content is essential and should always be visible, don’t hide it. |
|
Collapse |
You want to show/hide a single block of content (e.g., “Show more”, “Advanced options”). |
Simple, lightweight, ideal for progressive disclosure of one section. |
If you have multiple related panels → use Accordion. If you’re showing navigation or categories → use Tabs / Segmented Control. |