Show more and show less content using jQuery

jQuery

Sep 17, 2019Sep 27, 2022

Show more and show less content using jQuery

Websites always have content in it and it’s a fact that there is no website without content. However, there are some websites which are based on long length content. But we cannot always show full content. Here comes a requirement to get something which enables the user to see less content first. Then I fuser want to, can read the full content. The best way to do this is to provide a show more or less toggle. This will increase the readability and makes the page catchy for the user. In this way, the user can easily asses the content to read.

Contents show

This “show more and show less” property of text is quite helpful for news-based, blogging, and related websites. In such websites we need to show many articles and show more and less will help show the content in short and then can be expanded accordingly. I will tell you some easy steps to apply “show more and show less content in jQuery” with Readmore.js jQuery plugin.

Before getting into code, let’s first know what is Readmore.js?

Readmore.js jQuery Plugin

There are a large number of plugins available over the internet. Choosing the best and useful among them is such a big task. For choosing the appropriate one we need to hit and try many of them. However, this awesome jQuery plugin, written by Jed Foster is a very good solution to show more or show less content by jQuery. So let’s see how we can use this plugin to show less and more content on a web page. As this is a jQuery plugin hence, it is dependent on jQuery.

Step #1: Create an HTML file

Firstly create an HTML file with name index.html or you can choose any name of your wish. Write some HTML code as I am showing below after step #2.

Step #2: Load JQuery

Load the JQuery in that file with. You can do this by two methods. You can download jQuery to your folder and then load that file. Also, you can directly load a CDN jQuery.

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" crossorigin="anonymous"></script>

<script src="assets/jquery.min.js"></script>

The HTML File Code

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link rel="icon" href="assets/favicon.png" type="image/png">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description"
			  content="Show more or show less content using jQuery, change display speed, set margin and height in Readmore.js.">
		<meta name="author" content="Techbriefers">
		<title>Read more and read less by jQuery - Techbriefers</title>
		<!--[if lt IE 9]>
		<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
		<![endif]-->
		<style media="screen">
		   body{font:16px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif;color:#444}
		   a{color:#178db1}
		   .container{margin:0 auto;max-width:960px}
		   .section-wrap{border:1px solid #178db1;margin:12px;padding:12px}
		   .section-wrap h3{margin:3px}code{color:#f37f03}
		</style>
	</head>
	<body>
	<script src="assets/jquery.min.js"></script>
	</body>
</html>

Step #3 Create div for Text

Create a div element of with a class or ID and write some long text in it. Make sure your text is long enough to get affected by readmore.js. Class or ID name will be used to load the Readmore plugin for that particular div. Here, I am using class ‘my-readmore’ and in another example I am using ID ‘my-rmid’. Below is the code you need to add to the body of index.html file.

Step #4: Load readmore.js

To make read more and read less working, we need to load the Readmore plugin on our web page. This plugin is jQuery dependent, therefore; load this script after loading jQuery. You can download this from Jed Foster’s Readmore.js repository at Github. Place this in assets folder.

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

Step #5 Add Read more script

Now add the script to apply read more and read less functionality in your web page.

$('#my-rmid').readmore({
	moreLink: '<a href="#">Read More >></a>',
	lessLink: '<a href="#"><< Read less</a>',
	collapsedHeight: 53,
});

Let’s have a complete code to show more and less more altogether.

I am not including text in this code. Please do add text from the demo in place of {{YOUR TEXT HERE}}

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link rel="icon" href="assets/favicon.png" type="image/png">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description"
			  content="Show more or show less content using jQuery, change display speed, set margin and height in Readmore.js.">
		<meta name="author" content="Techbriefers">
		<title>Read more and read less by jQuery - Techbriefers</title>
		<!--[if lt IE 9]>
		<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
		<![endif]-->
		<style media="screen">
		   body{font:16px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif;color:#444}
		   a{color:#178db1}
		   .container{margin:0 auto;max-width:960px}
		   .section-wrap{border:1px solid #178db1;margin:12px;padding:12px}
		   .section-wrap h3{margin:3px}code{color:#f37f03}
		</style>
	</head>
	<body>
	<div class="container">
		<div class="section-wrap">
			<h3> Simple Example with collapsedHeight 54</h3>
			<div id="my-rmid">
				<p>{{YOUR TEXT HERE}}</p>
			</div>
		</div>
		<div class="section-wrap">
			<h3> Readmore example speed 30 mili-seconds</h3>
			<div class="my-readmore">
			   <p>{{YOUR TEXT HERE}}</p>
			</div>
		</div>
		<div class="section-wrap">
			<h3> Readmore example speed 1.5 seconds</h3>
			<div id="my-readmore">
				<p>{{YOUR TEXT HERE}}</p>
			</div>
		</div>
	</div>
	<script src="assets/jquery.min.js"></script>
	<script src="assets/readmore.min.js"></script>
	<script type="text/javascript">
		$('#my-rmid').readmore({
			moreLink: '<a href="#">Read More >></a>',
			lessLink: '<a href="#"><< Read less</a>',
			collapsedHeight: 53,
		});
		$('.my-readmore').readmore({
			moreLink: '<a href="#">Read More >></a>',
			lessLink: '<a href="#"><< Read less</a>',
			collapsedHeight: 53,
			speed: 30
		});
		$('#my-readmore').readmore({
			moreLink: '<a href="#">Read More >></a>',
			lessLink: '<a href="#"><< Read less</a>',
			collapsedHeight: 53,
			speed: 1500
		});
	</script>
	</body>
</html>

You have a lot of options to adjust the functionality of the toggle. For example toggle speed, height to display shortened text. You can also change the link text to read more and read less. Defaults are Read More and Close. Along with this, you can also load custom CSS to the block set for readmore by using blockCSS option.

View Demo

Share this article