## Overview

The `<ShowMore />` is used to make content scannable and offers the ability expand and collapse the content.

The `<ShowMore />` component consists of two core elements:

- **Content mask**: Content lives within this area, and includes a gradient at the bottom edge when collapsed. The `maxHeight` defines how much content is displayed in this area.
- **Expand action**: Allows the user to expand and collapse the content within the mask.

## Usage

```tsx live
<ShowMore aria-label="Example description">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Text>
</ShowMore>
```

## Max height

By default, the collapsed height is `4rem`. You can customise this via the `maxHeight` prop.

If the content height is less than `maxHeight`, the mask and toggle button won’t be shown.

```tsx live
<Flex flexDirection="column" gap="large">
  <Heading level={4} id="long-content-heading">
    Long content with maxHeight set to 5rem
  </Heading>
  <ShowMore maxHeight="5rem" aria-labelledby="long-content-heading">
    <Text as="p">This content exceeds 5rem, so it is initially collapsed and a toggle is shown.</Text>
    <Text as="p">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </Text>
  </ShowMore>

  <Heading level={4} id="short-content-heading">
    Short content with maxHeight set to 5rem
  </Heading>
  <ShowMore maxHeight="5rem" aria-labelledby="short-content-heading">
    <Text as="p">This content fits within 5rem, so no toggle is displayed.</Text>
  </ShowMore>
</Flex>
```

## Arbitrary content

The `<ShowMore />` component can be used with any content, including images, text, and other components.

```tsx live
<ShowMore aria-label="Decorative image section">
  <Box as="img" width="100%" src="/images/inclusive-design-header.png" alt="Accessibility" />
</ShowMore>
```

## Accessibility

The `ShowMore` component follows established accessibility patterns for toggled content, combining aspects of the [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and [Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) ARIA practices.

When collapsed, the full content is hidden from assistive technologies using `aria-hidden` and the `inert` attribute. When expanded, the content is exposed as a named region via `role="region"` with appropriate labelling. The toggle button uses `aria-expanded` and `aria-controls` to communicate its behaviour.

### Usage with a heading (preferred)

When possible, associate the content with a visible heading using the `aria-labelledby` prop. This helps screen readers announce the content and toggle relationship clearly.

```tsx
const headingId = 'section-heading';

return (
  <>
    <Heading level={2} id={headingId}>
      Section heading
    </Heading>
    <ShowMore aria-labelledby={headingId}>
      <Text>
        This is a long section of content that is initially collapsed to make the page easier to scan. Users can expand
        it to read the full details if needed.
      </Text>
    </ShowMore>
  </>
);
```

### Usage with `aria-label`

If there’s no visible heading to reference, use the `aria-label` prop to provide a descriptive name.

```tsx
<ShowMore aria-label="Product description">
  <Text>Detailed information about the product...</Text>
</ShowMore>
```

<Notice tone="informative">
  Prefer `aria-labelledby` over `aria-label` when possible, as it allows screen readers to reuse visible content for
  labelling.
</Notice>

Truncate long content with an optional expand/collapse toggle.

ShowMore

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources