Custom Read More/Read Less Buttons For Long Text - readmore.js

File Size: 4.66 KB
Views Total: 14391
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Custom Read More/Read Less Buttons For Long Text - readmore.js

The jQuery readmore.js plugin automatically creates read more and read less buttons to show/hide long block of text content with fadeIn/fadeOut animations.

How to use it:

1. Add the 'read-more' class to your paragraph.

<p class="read-more">
  Long Text Content Here

2. Add jQuery JavaScript library and the 'readmore.js' script to the webpage.

<script src="" 
<script src="src/readmore.js"></script>

3. Just call the function readmore() on the paragraph and done.


4. Customize the Read More and Read Less buttons with the following parameters.


  // text for Read Less button
  hideText: "Read Less...",

  // text for Read More button
  readText: "Read More...",

  // shows text on init
  isTextShown: false,

  // enables fade animations
  effect: true,

  // animation speed
  effectOption: "fast",

  // button classes
  buttonClasses: "btn-primary opacity-rollover",

  // button ID
  id: "read-more-action"



  • Added multiple functionality

This awesome jQuery plugin is developed by krisger. For more Advanced Usages, please check the demo page or visit the official website.