View More/Less

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

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
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.

Component	Use cases
View more/less	Reveals 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.”
Accordion	Expands or collapses content contained in collapsible items, such as panels.

Articles

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

Feedback

Usage

The view more/less component was designed to be collapsed by default, but can be modified to be expanded by default. Consider context and the role the content plays when deciding which option is best.

When a user selects the text label or icon, this component expands vertically to reveal content. Selecting the label or icon again will hide the content and revert the component to its collapsed position.
Hiding nonessential information, but still keeping it readily accessible, helps to save screen real estate.

The text labels for the view/more less component are customizable. Consider making the text labels more descriptive so that users can better anticipate the content when the component is expanded. This is especially true when there are multiple of the component on the page, making it harder for screen reader users to distinguish between them.

List

View more/less can save space by hiding part of a list. In this case, the component is aligned directly below the list. Selecting “View More” reveals hidden text. When this component is expanded, the text changes to “View Less” and the chevron flips to show the direction of the previously hidden content.

This example uses the “block” type in design and the “more/less list” version in code.

View more/less component can be used to hide and reveal an additional section of related information. The text label describes the hidden content. When this component is expanded, the chevron flips and the supplemental text is revealed. Because content is unlike the visible information, component remains above the revealed content.

This example uses the “block” type in design and the “more/less related” version in code.

Kinds

Block

Use the “block” type either below or at the end of a paragraph or sentence.

Selecting “View More” reveals the hidden text at the bottom of a paragraph. When this component is expanded, the text changes to “View Less,” and the chevron flips to show the direction of the previously hidden content.

This example uses the “block” type in design and the “more/less bottom” version in code.

Inline

Use the “inline” type within a paragraph or sentence.

An example of view more/less aligned within a paragraph. This version incorporates an ellipsis (…) in the body text when collapsed to indicate that there is hidden content. Selecting “View More” reveals the hidden text. When this component is expanded, the text changes to “View Less.”

This example uses the “inline” type in design and the “more/less inline” version in code.

Interaction

Behavior and states

Because the view more/less component is a link component, its interactions mimic link component behaviors and states.

Block and inline types in rest, hover, active, inactive, and focus states. When the block type is collapsed, the chevron points downward. The chevron flips upward when the component is expanded.

Standards

Accessibility

Ensure that view more/less is operable by keyboard
Users should be able to select the component by pressing tab and enter to expand or contract. The space bar can also be used to toggle the more/less link between open and closed.
WCAG 2.1: 2.1.3 Keyboard (No Exception)

View more/less labels should be clear, concise, and accurately descriptive
Any content which has been hidden within a view more/less should be obvious from the label alone, such as “Warranty details.”
WCAG 2.1: 1.3.1 Info and Relationships

Any lists with items hidden with view more/less should make the total items obvious from the outset
Hiding list items is discouraged in general, as it can be misleading. If you need to hide list items, make sure the total number of items is stated clearly up front (either with a heading, or in the immediately preceding text) so people understand that they’re not seeing the whole list.

When using the inline variant, place the break and ellipsis at a point which maximizes understandability and readability
All content visible before truncation should be readable and understandable, and avoid causing cognitive problems due to incomplete sentences or meaning created by the ellipsis.

Content

Capitalization
Use title case and capitalize the first letter of each word except for articles and prepositions.
Do: View More
Don’t: View more

Customize the text labels
Consider making the text labels more descriptive so that users can better anticipate the content when the component is expanded.

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<span data-dds="more-less">
  <button class="dds__more-less__button dds__more-less__button--standalone" type="button" aria-expanded="false">
    <span class="dds__more-less__button--more">Warranty Details</span>
    <span class="dds__more-less__button--less">Warranty Details</span>
  </button>
  <span class="dds__more-less__target">
    If you are a Consumer customer and purchased hardware from Dell or a Dell reseller, your order acknowledgement, invoice or receipt will
    include the name of the hardware product(s) that you purchased. To locate the applicable limited hardware warranty scroll through the
    warranties below.
  </span>
</span>

Copy code

View the view more/less demo and code in Vanilla.

View More/Less

Status

Contents

What's new

When to use

Articles

Timing guidelines

Feedback

Contents

Contents

Usage

List

Related

Kinds

Block

Inline

Interaction

Behavior and states

Standards

Accessibility

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

View More/Less

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

ArticlesCopy link to this section

Timing guidelines

Feedback

Contents

Vanilla

What's new

When to use

Articles