How to Create Read More Read Less Content Using jQuery

This tutorial has a concept to create read more less content using jQuery. It is the most effective part of the content. If you have a large amount of content to display on the web page then you will need to show some parts and hide the remaining part of the content. So that the content seems user-friendly & attractive.

Feature –

  • You can read more of the invisible content by clicking the Read more button
  • You can read less only the visible part of the content by clicking the Read less button.
  • Even You can create multiple Read more or less content on the same page.
  • It is Free & easy to implement on the web page.
  • It is created using HTML, CSS & jQuery.

Example – 

  • This example has divided a single content into two separate parts.
  • The first part contains some parts of the content which are placed within the visible section.
  • The second part contains the remaining part of the content which is placed within the invisible section.
  • A Read more button is created to perform Read more or less functionality.

read more read less using jquery

Read More or Read Less Using JQuery

Now, I am going to start coding step by step for reading more read less using jquery. Here, you will implement read more read fewer features with a simple example. Once you learn it, you can easily implement it for any kind of text/description.

Read Also –

Add Remove Input Fields Using jQuery

Close Modal on Click Outside anywhere using jQuery

Now, configure the following steps to quickly create read more read less text.

1. Create an HTML Div with Some Texts

In this step, To create an HTML Div with some text, you will have to implement the following points –

  • Create a parent div with class="large-content"  and also create all the following steps within it.
  • Create a title with an h3 tag. It is optional. You may skip this step.
  • Also, Create a child div with class="visible-content" to display some parts of the whole text
  • Create another child div with class="invisible-content"  to display whole text after clicking read more.
  • After that, create an HTML button with class="btn more-less" to read more or less content on the click event.
  • Write Some lines of CSS code to design the title, description & button.

File Name – index.php

xmp{ white-space: break-spaces;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">\
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
  .large-content .more-less{
 border:none;
 background:white;
 color:#f76b1c;
 font-size:16px;
 margin:5px 0px;
 text-decoration:underline;
 cursor:pointer;
 padding-left:0px;
}
.large-content .more-less:focus{
  outline:unset;
}
.large-content .more-less:hover{
  color:#d64f03;
}
 
 .large-content p{
   font-size:18px;
   line-height:28px
}

html, body{
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}
</style>


</head>
<body>

<!--=========First read more or read less content start===========-->
<div class="large-content">
<h3>This is the first content</h3>
<div class="visible-content">
<p>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...</p>
</div>
<div class="invisible-content"><p>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></div>
<button class="btn more-less">Read more</button>
</div>
<!--=========First read more or read less content end===========-->


<!--jquery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- custom jquery link-->
<script type="text/javascript" src="front-script.js"></script>

</body>
</html>

 

2. Create Read More or Read Less Using jQuery

Before creating a read more read less script, You should read the following points

  • First of all, hide the text of section class="invisible-content"
  • Configure the following points by clicking the button
    • If the section class="invisible-content" is visible then assign Read more otherwise Read Less text to a new variable moreLessButton.
    • Update the text of the Clicking button with moreLessButton.
    • toggle text of section class="invisible-content" and class="visible-content"

In this way, you can easily implement it in your project.

File Name custom.js

$(document).ready(function(){

$(".invisible-content").hide();

$(document).on('click', '.btn', function(){
var moreLessButton = $(".invisible-content").is(':visible') ? 'Read More' : 'Read Less';
$(this).text(moreLessButton);
$(this).parent('.large-content').find(".invisible-content").toggle();
$(this).parent('.large-content').find(".visible-content").toggle();
});

});

Note – Make sure that custom.js & jQuery CDN must be included in the index.php

My Suggestion

Dear Developers, I hope you have got the above coding concepts. Now you can easily implement the above functionality in your project. If you have any doubts or questions related to this tutorial, you can ask me through the below comment box. I will reply as soon as possible.

Categories jQuery

Leave a Comment