Introduction
Expand and Collapse share similar features to the accordion component. While accordion is used to reveal content below a title, Expand & Collapse hides and reveals either a portion or a complete block of text.
- Use Expand & Collapse in order to hide and reveal portions of content, e.g. a comment or other secondary text blocks
Usage
Use Expand & Collapse to reveal further portions of a text block with non-primary information, such as parts of a comment or review.
Don't hide content directly below a title, use an accordion instead.
Use for secondary content that isn't necessary for a user's understanding of the flow, e.g. reviews.
Avoid hiding primary text in an Expand & Collapse. If you're trying to link to more relevant information, use a button to navigate to a different page/section instead.
Hide additional, non-crucial text that can be expanded.
Don't make users expand & collapse to navigate to primary actions, such as sign up.
Also known as
Show/View Less, Show/Hide