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

Category: Javascript , Text | August 20, 2021
Views Total:10,340 views
Official Page:Go to website
Last Update:August 20, 2021


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


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:

  target: 'p'

All default settings.

  // 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: '',    


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


  • Minify, update version

You Might Be Interested In:

2 thoughts on “Read More / Read Less Functionality In Pure JavaScript – ReadMore.js

  1. Trekka12

    Is it possible to add multiple targets? Say for example I wish to use this script partially for product texts on e-commerce site, and then also the landing-page texts?

    The script works really well btw for single target so far! 🙂


Leave a Reply