Smooth Responsive Read More JavaScript Plugin – Readmore.js

Category: Javascript , Text | October 31, 2023
Author:corgras
Views Total:195 views
Official Page:Go to website
Last Update:October 31, 2023
License:MIT

Preview:

Smooth Responsive Read More JavaScript Plugin – Readmore.js

Description:

A smooth and responsive ‘Read More’ JavaScript plugin that truncates long text content and reveals the full content with the click of a “Read More” link.

You can use the plugin to create better reader experiences on long posts or articles. It declutters the initial view while still making the entire text reachable. The adaptive sizing also optimizes content display for mobile vs desktop.

How to use it:

1. Download and load the main script readmore.min.js in the document.

<script src="/path/to/readmore.min.js"></script>

2. Initialize the plugin on the target text block as follows:

<article class="demo">
  Long Content Here
</article>
initReadMore('.demo', {
  // options here
});

3. The collapsed state can be customized by setting a maximum height. Default: 250(px).

initReadMore('.demo', {
  collapsedHeight: 200,
  heightMargin: 16,
});

4. Specify the animation speed. Default: 200(ms).

initReadMore('.demo', {
  speed: 200,
});

5. Customize the Read More & Read Less links.

initReadMore('.demo', {
  moreLink: '<a href="#">Read more</a>'
  lessLink: '<a href="#">Close</a>'
});

6. Disable the plugin on small screens.

initReadMore('.demo', {
  // options here
}, 768);

You Might Be Interested In:


Leave a Reply