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

Category: Javascript , Text | August 20, 2021
Author:georapbox
Views Total:2,364 views
Official Page:Go to website
Last Update:August 20, 2021
License:MIT

Preview:

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

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

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! 🙂

    Reply

Leave a Reply