View More/Less

This component is used to hide or reveal content. It saves space while preserving visual balance and maintaining information hierarchy.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

The view more/less component is a new, standalone component. In the previous version of the design system, this component was listed as a type of accordion and called “Show More/Less.”

When to use

The view more/less and accordion components share similar features. The main difference is the way that content is revealed and how that changes the information displayed.

ComponentUse cases
View more/lessReveals or hides contextual content. The content may stop mid-sentence or -paragraph to save space; the continuation of the content is often indicated by an ellipsis (…) combined with phrases like “Read more” or “Show less.”
AccordionExpands or collapses content contained in collapsible items, such as panels.

Articles

Timing guidelines

Read the Nielsen Norman Group's article on view more/less timing.

Feedback