Read More

Truncate extra content with our flexible Read More functionality.

Code Example

<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

  • Activating Read More

    Add data-readmore="true" Attribute to a <div> to activate Read More funtionality.

  • 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

Ex: data-readmore-size="200px"

Note: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

Ex: data-readmore-speed="500"
data-readmore-trigger

CSS Selector of the Read More Trigger

Ex: data-readmore-trigger=".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

Ex: data-readmore-trigger-open="Read More"

Note: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

Ex: data-readmore-trigger-close="Read Less"

Note:You can use Basic HTML inside like Icons. Ex: Read Less

Last Modified: July 2, 2020

Need Help?