Create simple jquery based readmore / less content feature

Collapsing and expanding long blocks of text with “Read more” and “Read less” links is good idea to display more articles on single page. You must have seen this feature on many article based websites, Each article a Readmore link, as soon as you click the link article will expend with full content + “Read less” link.



In todays post I am going to create the same feature, For creating this feature i found a wonderful library called readmore.js which is created by jedfoster.

If article text is larger, with this plugin the extra words are hide and a “Read more” link is presented to user. This way you can keep long text out of the view and stop the cluttering of page.
readmore-less-content-jquery
Suppose we have a html page with some paragraph, we have to add “Read more” and “Read less” feature to all paragraph.

<h3>Title-1</h3>
<p class="readmore">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.	
</p>
<h3>Title-2</h3>
<p class="readmore">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.	
</p>
<h3>Title-3</h3>
<p class="readmore">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.	
</p>

Add a common class called readmore on each paragraph. We’ll apply “Read more” and “Read less” feature on this class.



Now add jquery library with readmore.js plugin on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="readmore.min.js"></script>

Finally add function to make paragraph more and less readable.

$(function(){
  $('.readmore').readmore({
  	speed: 75,
  	collapsedHeight: 58,
        lessLink: '<a href="#">Read less</a>'
  });
});

There is lot’s of other properties for setting collapsing and expanding behaviors of the box, you must see official documentation of readmore.js plugin.
https://github.com/jedfoster/Readmore.js

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff