Read More / Read Less Functionality In Pure JavaScript – ReadMore.js

Preview:

Description:

A really lightweight (~2kb minified) and cross-browser JavaScript library that truncates text by words and shows/hides text blocks with Read More and Read Less links.

How to use it:

Import the minified version of the ReadMore.js library into the webpage.

<script src="dist/readMoreJS.min.js"></script>

Initialize the ReadMore and specify the target text wrapper as follows:

$readMoreJS({
  target: 'p'
});

All default settings.

$readMoreJS({
  // Selector of the element the plugin applies to (any CSS selector, eg: '#', '.').
  target: '', 
  // Number of words to initially display (any number). 
  wordsCount: 50,     
  // If true, user can toggle between 'read more' and 'read less'. 
  toggle: true,              
  // The text of 'Read more' link. 
  moreLink: 'read more ...', 
  // The text of 'Read less' link. 
  lessLink: 'read less',      
  // The class given to the read more link. 
  linkClass: '',    
});

Changelog:

v2.0.0 (08/20/2021)

• Rename numOfWords option to wordsCount.
• Remove the container element of the “Read more/less” link along with containerClass option and place the link inline by default. You can still use a CSS class to make the link element block using the linkClass option.
• Do not provide a default value for linkClass option.
• Remove data-readmore and id attributes from the “Read more/less” link element.
• Update the way to initialise the library.

v1.2.0 (08/18/2021)

• Export library in UMD format.
• Provide a way to destroy if no longer needed.

v1.1.1 (08/18/2021)

• Bugfix

10/18/2018

• Minify, update version