The expandable component is a progressive disclosure component. Such components truncate information for the general layout/design and are intended to deliver additional content depending on users' interests. They help keep the interface clean and reduce scrolling by saving vertical space, while being indicative of the additional content that is available through extra interaction.
Do's
- use a button label for each item with a short, distinct and indicative title of the hidden content
Don'ts
- don't use with large blocks of content
- don't hide important information that should be present at all times
When to use
- use when additional information is offered that will only benefit a small group of users
- when you can make extensive and complex content easier to digest through descriptive labels
When not to use
- do not use as a button
- do not use it consecutively - use accordions instead
- don't use when pages are short (reading time: under 3 minutes)