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

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.

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"

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

  • Publication date: 15.05.2018
  • Source