components icon

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
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
ExperimentalElement offered for testing and feedback. Not intended for use in production.
React
React
In backlogElement is in backlog
Angular
Angular
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.

Feedback