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

Category: Javascript , Text | October 18, 2018
Author: georapbox
Views Total: 7,039
Official Page: Go to website
Last Update: October 18, 2018
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="src/readMoreJS.min.js"></script>

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

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

All default settings.

$readMoreJS.init({

  // Selector of the element the plugin applies to (any CSS selector, eg: '#', '.').
  target: '', 

  // Number of words to initially display (any number). 
  numOfWords: 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: 'rm-link',    

  // The class given to the div container of the read more link.
  containerClass: false

});

Changelog:

10/18/2018

  • Minify, update version

You Might Be Interested In:


One thought 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