Show more

Component location

Files are located in src/components/layout/showmore. Inside you’ll find the component JS, an HTML example, and an SCSS file for styling.

Note

The JS connection is automatic when you use the required data-attributes in your markup.

Basic markup

Create a wrapper with data-anim-showmore, a content element with data-anim-showmore-content, and a button with data-anim-showmore-button. The button should start hidden using the hidden attribute and contain two <span> labels: “Show more” and “Hide”.

Base structure (text)

<div data-anim-showmore class="block">
	<div data-anim-showmore-content class="block__content"></div>

	<button hidden data-anim-showmore-button type="button" class="block__more">
		<span>Show more</span>
		<span>Hide</span>
	</button>
</div>

Put your text (or any content) inside the element marked with data-anim-showmore-content.

Modes: height or items

Depending on what you’re collapsing, choose one of two modes via data-anim-showmore:

size — limit by content height (default)
items — limit by number of list items

Important

If the content is smaller than the configured limit, the “Show more” button stays hidden.

Limit by list items

For lists (ul/ol), set data-anim-showmore="items". Then use data-anim-showmore-content on the list itself.

Items mode (list)


<div data-anim-showmore="items" class="block">
	<ul data-anim-showmore-content class="block__content">
		<li>Item #1</li>
		<li>Item #2</li>
		<li>Item #3</li>
		<li>Item #4</li>
		<li>Item #5</li>
	</ul>

	<button hidden data-anim-showmore-button type="button" class="block__more">
		<span>Show more</span>
		<span>Hide</span>
	</button>
</div>

To set how many items are visible, provide a number in data-anim-showmore-content (default: 3 in items mode).

Show 4 items initially


<ul data-anim-showmore-content="4" class="block__content">
	...
</ul>

Limit by height (text / content)

In the default (height) mode, you can set the maximum visible height in pixels inside data-anim-showmore-content (default: 150). Write only a number (no px).

Size mode (height limit)


<div data-anim-showmore class="block">
	<div data-anim-showmore-content="200" class="block__content">
		Lorem ipsum dolor sit amet consectetur, adipisicing elit...
	</div>

	<button hidden data-anim-showmore-button type="button" class="block__more">
		<span>Show more</span>
		<span>Hide</span>
	</button>
</div>

When expanded, the wrapper receives the class --showmore-active. The first span in the button is hidden and the second span is shown. Click again to collapse back.

Control animation speed

To change the expand/collapse animation speed, set a number (milliseconds) on data-anim-showmore-button. Default is 500.

1s animation


<button hidden data-anim-showmore-button="1000" type="button" class="block__more">
	<span>Show more</span>
	<span>Hide</span>
</button>

Enable only on specific screen widths

To enable the feature only below/above a breakpoint, add data-anim-showmore-media to the wrapper. Pass a width and a type separated by comma:

max (default) — enable when viewport is smaller than the width
min — enable when viewport is larger than the width

Enable on ≥ 768px


<div data-anim-showmore data-anim-showmore-media="768,min" class="block">
	<div data-anim-showmore-content="200" class="block__content">...</div>

	<button hidden data-anim-showmore-button="1000" type="button" class="block__more">
		<span>Show more</span>
		<span>Hide</span>
	</button>
</div>

Practical use

Common case: enable Show more on mobile only (use max) to keep long text compact.

Download

Keep pages clean without deleting content. Collapse long text and lists and let users expand only when needed. Download the template and start using Show more right away.

Download Animmaster Vite Template Save your time — start now

Component: Show more Collapse text or lists, then expand on demand