<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Inline variant</strong>: Added the “View Less” inline variant (Type = Inline, Is Expanded = Yes) for consistency with the blocked version.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Use the view more/less component to reveal or hide extra content without overwhelming the page.</p>
<p>Use it when you need to:</p>
<ul>
<li>Keep long text or secondary information collapsed by default to save space.</li>
<li>Let users access additional details on demand without navigating away.</li>
<li>Maintain a clean, scannable layout while still supporting deeper reading.</li>
</ul>
<p>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.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>View more/less</td>
<td>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.”</td>
</tr>
<tr>
<td><a href="/components/accordion/">Accordion</a></td>
<td>Expands or collapses content contained in collapsible items, such as panels.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>View more/less component has two elements.</p>
<details data-name='image-block' data-images='[{"alt":"View more less anatomy","caption":"1. **Label:** Displays the action text. Shows “View More” when the content is collapsed and switches to “View Less” when the content is expanded.\n2. **Chevron icon:** Only used in the block variant. Visually indicates the current state. Points down when the content is collapsed and points up when the content is expanded.","url":"https://dds.dell.com/site/v3/components/view-more-less/view-more-less-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details><h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/timing-exposing-content/","type":"External"},"title":"Timing guidelines","description":"Read the Nielsen Norman Group&#39;s article on view more/less timing.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"View Chat Toolkit (Restricted)","path":"https://dell.sharepoint.com/sites/AIDesignCoE/SitePages/AI-Chat-Toolkit.aspx","type":"External"},"title":"AI Chat Toolkit","description":"Enhance AI chatbot interaction, ensuring a seamless experience from welcome message to \"End Chat\".","icon":"sparkles"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## 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](/components/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.

<details data-name='image-block' data-images='[{"alt":"List variant in expanded and collapsed states. ","caption":"\n\nThis example uses the “block” type in design and the “more/less list” version in code.\n\n","url":"https://dds.dell.com/site/v3/components/view-more-less/view-more-less-usage-list.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Related

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.

<details data-name='image-block' data-images='[{"alt":"Related variant in expanded and collapsed states.","caption":"This example uses the “block” type in design and the “more/less related” version in code.","url":"https://dds.dell.com/site/v3/components/view-more-less/view-more-less-usage-related.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## 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.

<details data-name='image-block' data-images='[{"alt":"Block type view more/less component in expanded and collapsed states.","caption":"This example uses the “block” type in design and the “more/less bottom” version in code","url":"https://dds.dell.com/site/v3/components/view-more-less/view-more-less-kinds-block.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### 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.”

<details data-name='image-block' data-images='[{"alt":"Inline type in expanded and collapsed states.","caption":"This example uses the “inline” type in design and the “more/less inline” version in code.","url":"https://dds.dell.com/site/v3/components/view-more-less/view-more-less-kinds-inline.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behavior and states

Because the view more/less component is a [link component](/components/link/), its interactions mimic link component behaviors and states.

<details data-name='image-block' data-images='[{"alt":"The two types and variants of the view more/less component displaying all possible behaviors and states.","caption":"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.","url":"https://dds.dell.com/site/v3/components/view-more-less/view-more-less-interactions.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## 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.2: [2.1.3 Keyboard (No Exception)](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html)\
\
\
**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.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/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.

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                                 | Collection | CSS var                                         | Preview    |
| ------------------------------------ | ---------- | ----------------------------------------------- | ---------- |
| view-more-less/gap                   | Component  | `var(--dds-view-more-less-gap)`                 | —          |
| color/text/INFO/rest                 | Semantic   | `var(--dds-color-text-info-rest)`               | \#0063B8   |
| icon/size/xs                         | Component  | `var(--dds-icon-size-xs)`                       | —          |
| color/text/INFO/hover                | Semantic   | `var(--dds-color-text-info-hover)`              | \#00468B   |
| border/radius/xs                     | Semantic   | `var(--dds-border-radius-xs)`                   | —          |
| color/background/SURFACE/transparent | Semantic   | `var(--dds-color-background-surface-transparent)` | \#FFFFFF00 |
| color/text/INFO/pressed              | Semantic   | `var(--dds-color-text-info-pressed)`            | \#002A58   |
| color/text/inactive                  | Semantic   | `var(--dds-color-text-inactive)`                | \#B6B6B6   |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-view-more-less--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-view-more-less--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-view-more-less--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-view-more-less--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-view-more-less--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-view-more-less--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

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

View More/Less