Home Javascript JavaScript Library That Adds “Read More” Functionality On Blocks of Text

JavaScript Library That Adds “Read More” Functionality On Blocks of Text

Javascript webcodeflow · January 21, 2023 · 0 Comment

ReadMore.js JavaScript library that adds a “read more” functionality to the blocks of text to which it is applied. ReadMore is a lightweight (~2KB mini) and multi-browser library that cuts text with words and shows/hides blocks of text with more reading and less reading of links.

How to make use of it:

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

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

Initialize the ReadMore and specify the goal 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

});