# Show more

> Clamped text with a button that shows the rest, and hides itself when the text already fits.

## Anatomy

A `.show-more` cuts long text to a few lines and adds a button that shows the rest.

Put the text in a child with a [line clamp class](/helpers.html.md), `line-clamp-1`, `line-clamp-2` or `line-clamp-3`, and add a `<button type="button">` whose text is the collapsed label. `AutoInit()` starts every one. The button gets `aria-expanded` and an `aria-controls` that names the text, and the component adds an id to the text when it has none.

This jacket is cut from a recycled shell that sheds light rain and packs into its own chest pocket. A brushed lining keeps it warm on cool mornings without the bulk of insulation, and two zipped hand pockets hold a phone and keys. The hood folds into the collar when you don't need it, and the cuffs close with a soft stretch band.

Show more

```
<div class="show-more">
  <p class="line-clamp-3">This jacket is cut from a recycled shell that sheds light rain...</p>
  <button type="button" class="text">Show more</button>
</div>
```

## The button's label

While the text is open, the button reads "Show less". `data-show-less` on the button sets that label for one control, and the `i18n.showLess` option sets it for the component. Closing the text puts the author's label back. Only the button's last text outside an `aria-hidden="true"` element changes, so an icon keeps its glyph. An icon-only button named by `aria-label` has no text to change: it keeps its name, and only `aria-expanded` says the text is open. Prefer a visible label.

```
<div class="show-more">
  <p class="line-clamp-2">...</p>
  <button type="button" class="text" data-show-less="Fewer details">
    More details
    <span class="material-symbols" aria-hidden="true">expand_more</span>
  </button>
</div>
```

## Text that already fits

While the clamped text fits, the button gets `hidden`, so it is neither seen nor reached by Tab. The component checks again when the text's size changes and once web fonts have loaded. With a window-size prefix, `line-clamp-3 expanded:line-clamp-none` clamps on compact and medium windows and hides the button from Expanded up. Open text keeps its button, and a focused button stays until focus moves on.

## Limits

The clamp classes set `display`, so the text cannot also be a flex or grid container. The browser's find-in-page does not open clamped text, so a match in the hidden lines is not shown until the person opens it. The text opens and closes at once, without a transition.

## Methods

```
const more = Expressive.ShowMore.getInstance(document.querySelector('.show-more'));
more.open();    // shows the full text and fires expressive:open
more.close();   // clamps it again and fires expressive:close
more.destroy(); // removes the listeners and restores the markup
```