Smooth Responsive Read More JavaScript Plugin – Readmore.js

Preview:

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);