Show more less content using jquery

by  
Share:

Have you come across any situation where you need to toggle to show more less content. This feature comes in handy at situation at many news/content based websites where you need to show lots of articles and this feature helps add more content on less area. In this tutorial you will learn how to show more less content using jquery.

View Demo

Readmore.js jQuery plugin

Let me first tell you that I am not the author of this awesome jquery plugin that is been used in this tutorial, This jquery plugin name is Readmore.js and been written by Jed Foster. Now let’s see how do we use this plugin to show more less content.

Step 1. First of all we will create an html page called index.html and attach jquery library file to it.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="https://aarafacademy.com/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Show more less content using jQuery, change display speed, set margin and height.">
<meta name="author" content="Shahrukh Khan">
<title>Read more less using jquery - Aaraf Academy</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
{{your content goes here}}
<script src="jquery-1.9.0.min.js"></script>
</body>
</html>

Step 2. Add a div container inside the body tag and give an ID ( I have used default ) to it. add some dummy text inside the container to it.

<div id="default">
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a odio quis sapien tempus elementum vitae in lacus. Nullam malesuada quam sapien, sed ultrices orci dignissim a. In hac habitasse platea dictumst. Vestibulum non dolor vitae quam pretium fermentum. Mauris feugiat mollis lectus eget sodales. Fusce eu est velit. Sed tristique finibus urna sit amet hendrerit.
			<br>
Aenean orci risus, molestie sed mi at, egestas laoreet justo. Vivamus in massa urna. Aliquam eros quam, tincidunt ut mollis ut, suscipit sed purus. Pellentesque euismod nisl ac velit interdum, a accumsan neque tempor. In posuere sem sagittis, dapibus tortor et, sollicitudin justo. Sed aliquam sodales fermentum. Nulla in egestas ante, nec bibendum ligula. Nullam tincidunt odio vitae libero congue pretium. Aenean ipsum neque, mattis quis ipsum non, interdum ornare mi. Vivamus pulvinar nisi vel semper porta. Suspendisse mauris magna, commodo nec metus aliquet, pretium dapibus tellus. Praesent eget tortor ex.
<br>
Etiam maximus, ipsum in mollis ullamcorper, neque magna vestibulum ipsum, quis convallis libero nulla eu felis. Etiam euismod aliquam metus, et egestas augue tempor id. Proin suscipit erat congue iaculis tristique. Nunc vel mauris quis dui sodales ullamcorper. Vestibulum eu nisl euismod lacus dictum tempor nec sed odio. Donec faucibus auctor nunc, non pulvinar nulla blandit vitae. Morbi nec vehicula risus, eget mattis sem. Morbi fermentum nulla feugiat eleifend vehicula. Nullam pulvinar sed nunc vitae condimentum. In sed quam non ipsum fermentum semper. Curabitur ornare pharetra rutrum. Donec viverra pulvinar purus sit amet imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor varius magna, id commodo urna ultrices a. Suspendisse efficitur nunc at turpis vestibulum semper. Suspendisse sollicitudin massa non ipsum volutpat, et efficitur erat mattis
</p>
			
			</div>

Step 3. Add readmore.js file just above body tag and then bind the div ID with this plugin. see below.
<!-- start of script -->
<script src="readmore.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
     $('#default').readmore({
          collapsedHeight: 70,
     });
});
</script>
<!-- end of script -->
</body>
</html>

If you didnt get the read more text, try giving a lesser value for collapsedHeight attribute.

Alternatively you can bind the same div using the class attribute. You can also change the margin, height, anchor text and speed of animation. See below.

<div class="mainarea">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a odio quis sapien tempus elementum vitae in lacus. Nullam malesuada quam sapien, sed ultrices orci dignissim a. In hac habitasse platea dictumst. Vestibulum non dolor vitae quam pretium fermentum. Mauris feugiat mollis lectus eget sodales. Fusce eu est velit. Sed tristique finibus urna sit amet hendrerit.<br>
Aenean orci risus, molestie sed mi at, egestas laoreet justo. Vivamus in massa urna. Aliquam eros quam, tincidunt ut mollis ut, suscipit sed purus. Pellentesque euismod nisl ac velit interdum, a accumsan neque tempor. In posuere sem sagittis, dapibus tortor et, sollicitudin justo. Sed aliquam sodales fermentum. Nulla in egestas ante, nec bibendum ligula. Nullam tincidunt odio vitae libero congue pretium. Aenean ipsum neque, mattis quis ipsum non, interdum ornare mi. Vivamus pulvinar nisi vel semper porta. Suspendisse mauris magna, commodo nec metus aliquet, pretium dapibus tellus. Praesent eget tortor ex.
<br>
Etiam maximus, ipsum in mollis ullamcorper, neque magna vestibulum ipsum, quis convallis libero nulla eu felis. Etiam euismod aliquam metus, et egestas augue tempor id. Proin suscipit erat congue iaculis tristique. Nunc vel mauris quis dui sodales ullamcorper. Vestibulum eu nisl euismod lacus dictum tempor nec sed odio. Donec faucibus auctor nunc, non pulvinar nulla blandit vitae. Morbi nec vehicula risus, eget mattis sem. Morbi fermentum nulla feugiat eleifend vehicula. Nullam pulvinar sed nunc vitae condimentum. In sed quam non ipsum fermentum semper. Curabitur ornare pharetra rutrum. Donec viverra pulvinar purus sit amet imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor varius magna, id commodo urna ultrices a. Suspendisse efficitur nunc at turpis vestibulum semper. Suspendisse sollicitudin massa non ipsum volutpat, et efficitur erat mattis
</p>			
</div>
<!-- start of script -->
<script type="text/javascript">
$( document ).ready(function() {
     $('.mainarea').readmore({
        speed: 1000,
        collapsedHeight: 110,
        heightMargin: 20,
        moreLink: '<a href="#">Show me more</a>',
        lessLink: '<a href="#">Show me less</a>',
     });
});
</script>
<!-- end of script -->

If you have any great plugin to achieve the same objective, feel free to share with us in the comment section below.

View Demo
Download

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Dennis on

I really appreciate the work you are doing. I have been learning a lot from you and your tutorials are exactly what I have been looking to learn. Thank you so much.

Reply
Shahrukh Khan on

You are welcome. Thanks for your appreciation.

Reply
Gaurav Mishra on

Thank you very much , you helped me a lot 🙂

Reply
Shahrukh Khan on

You are welcome 🙂

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.