The Read More element collapses long content to a comfortable preview height with a soft gradient fade, then expands it on demand via a trigger link. It keeps pages short and scannable while keeping the full text in the DOM for search engines. Everything is driven by a single data-readmore attribute on a wrapping element.

Basic usage

Wrap the content in an element with data-readmore="true" and place a trigger element (default selector .read-more-trigger) at the end. The plugin fills the trigger with the open/close labels.

<div data-readmore="true"
     data-readmore-trigger-open="Read More <i class='fa-solid fa-chevron-down'></i>"
     data-readmore-trigger-close="Read Less <i class='fa-solid fa-chevron-up'></i>">

    <p>Your long-form content goes here. The component measures it, collapses it to the preview height, applies a gradient mask, and toggles the height smoothly when the trigger is clicked.</p>

    <a href="#" class="btn btn-link text-primary read-more-trigger"></a>
</div>

Key attributes

data-readmore: set to true to enable the component on the wrapper.
data-readmore-size: the collapsed preview height, for example 10rem, 250px, or 6rem. Default 10rem.
data-readmore-speed: expand/collapse animation duration in milliseconds. Default 500.
data-readmore-trigger: selector for the trigger element. Default .read-more-trigger.
data-readmore-trigger-open: HTML for the trigger in the collapsed state. Default Read More.
data-readmore-trigger-close: HTML for the trigger in the expanded state. Default Read Less. Set to false for open-only (see below).
data-readmore-scrollup: set to true to scroll back up to the block when collapsing.
data-readmore-mask: set to false to remove the gradient fade overlay.
data-readmore-maskcolor: hex color of the fade, for example #FFF, #F8F9FA, or #DDD. Default #FFF.
data-readmore-masksize: height of the fade overlay, for example 100%, 80%, or 50%. Default 100%.

Icon-only trigger

Any HTML works in the trigger labels, so you can use a chevron icon instead of text.

<div data-readmore="true"
     data-readmore-trigger-open="<i class='bi-chevron-down i-plain m-0 float-none'></i>"
     data-readmore-trigger-close="<i class='bi-chevron-up i-plain m-0 float-none'></i>">
    <p>Compact content for tight layouts, sidebars, or cards.</p>
    <a href="#" class="btn btn-link read-more-trigger"></a>
</div>

Open-only mode

Set the close label to false so the content expands once and the trigger disappears. Ideal for terms, disclosures, or articles you do not want re-collapsed.

<div data-readmore="true"
     data-readmore-trigger-open="Read More <i class='fa-solid fa-chevron-down'></i>"
     data-readmore-trigger-close="false">
    <p>Once expanded, this stays open and the trigger is hidden.</p>
    <a href="#" class="btn btn-link read-more-trigger"></a>
</div>

Custom fade color and size

Match the mask to a colored background and shorten it for a subtler fade.

<div data-readmore="true"
     data-readmore-size="6rem"
     data-readmore-maskcolor="#F8F9FA"
     data-readmore-masksize="80%">
    <p>Content over a light-gray section.</p>
    <a href="#" class="btn btn-link read-more-trigger"></a>
</div>

Tips

Set data-readmore-maskcolor to match the section background so the fade blends seamlessly.
Use data-readmore-scrollup="true" on very long blocks so collapsing returns the reader to the top of the excerpt.
Set data-readmore-mask="false" if you prefer a hard cut instead of a gradient.
The component recalculates on resize, so the preview height stays correct across phones, tablets, and desktops.

Usage

<div data-readmore="true" data-readmore-trigger-open="Read More <i class='icon-angle-down'></i>" data-readmore-trigger-close="Read Less <i class='icon-angle-up'></i>">

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ullam aliquid quos, tempore, quibusdam saepe numquam fugiat ab perspiciatis minima itaque in repellendus ad, modi voluptates quas distinctio iusto nesciunt. Esse, maxime dolorem distinctio quibusdam doloribus reiciendis sint obcaecati ex impedit ea non nam eos voluptate quod recusandae provident, unde libero, vel laudantium hic a. Ea amet, maxime voluptatibus distinctio temporibus libero cupiditate deserunt, facere rem, alias similique mollitia possimus asperiores cum harum at doloribus sed voluptas ipsam. Accusamus adipisci at sint voluptas unde deserunt incidunt excepturi perferendis quae similique laudantium voluptatibus quo sed perspiciatis autem quis hic, aut pariatur iste aliquid, veniam suscipit doloribus aliquam praesentium.</p>

	<p class="mb-0">Maxime quos, ex eligendi possimus earum amet, voluptatibus tempore asperiores officia, blanditiis non adipisci labore deleniti. Aliquam perferendis cumque maxime necessitatibus ut consequuntur, alias, error, inventore pariatur, quisquam eius impedit dolores recusandae enim harum! Saepe vel optio nemo id magni tempore repudiandae quod ullam, quia reprehenderit incidunt ipsum natus cum quidem? Provident, a ut.</p>

	<a href="#" class="btn btn-link text-primary read-more-trigger"></a>

</div>

Tip: Check the read-more.html Template for more comprehensive examples

How to Use

1
Activating Read More
Add data-readmore="true" Attribute to a <div> to activate Read More functionality.
2
Add a Trigger
Add a Trigger inside the Read More element to be able to Open/Close Triggers.

Example:
```
<a href="#" class="btn btn-link text-primary read-more-trigger"></a>
```

Settings

Setting	Description
`data-readmore`	Add this Attribute on a DIV to activate Read More
`data-readmore-size`	Maximum Height for the Read More Element in CSS Units Example: `200px` You can use any CSS Unit for the Value. Ex: `10rem`
`data-readmore-speed`	Speed of the Animation when opening/closing Read More Content in milliseconds Example: `500`
`data-readmore-trigger`	CSS Selector of the Read More Trigger Example: `.read-more-trigger`
`data-readmore-trigger-open`	Text to Display on the Read More Trigger when the Read More Element is ready to be opened Example: `Read More` You can use Basic HTML inside like Icons. Ex: Read More
`data-readmore-trigger-close`	Text to Display on the Read More Trigger when the Read More Element is ready to be closed Example: `Read Less` You can use Basic HTML inside like Icons. Ex: Read Less
`data-readmore-mask`	Enables or Disables a Mask for the Read More DIV Example: `true`
`data-readmore-masksize`	Size of the Read More Mask Example: `100%`
`data-readmore-maskcolor`	Color of the Read More Mask Example: `#FFFFFF`

Was this page helpful?

Read More