Updated April 7, 2023
Introduction to jQuery read more
The jQuery read more is used to limit the page text visibility. When we need to hide the content of the page of a particular size, in place of showing all the text content, we can use the read more button or link. The read more allows the user to read the full page content by pressing the read more button or link. Whereas pressing the read less button can use to hide the content of the page.
The syntax of the jQuery stopPropagation( ) function –
if( $( "selector" ).text() == ' Read More' )
{ $( "selector" ).text( 'Read Less' );
// code to show the full content
$( "selector" ).prev().toggle();
}
else{
$( "selector" ).text( 'Read More' );
// code to show the reduce content
$( "selector" ).prev().toggle();
}Parameters –
The jQuery read more does not accept any parameter.
Working of jQuery read more
The jQuery read more used to show the limited page text visibility. Suppose we have a div element in the HTML page that contains long text content, now we need to show only one or two lines of text and the remaining content should display if the user is interested to read farther by clicking on the read more button. So we first display only one line of content then place the “read more” button, the “read more” button calls to the function on click of it to display the remaining content, we can see in the below examples.
Examples for the jQuery read more
Here are the follwoing examples mention below
Example #1
Example of jQuery read more to show and hide the text content by using the prev() function –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery read more </title>
<!-- jQuery CDN -->
<script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src = "assets/jquery.min.js"></script>
<style>
.contid {
font-size : 12px;
}
.h1 {
color : blue;
font-size : 20px;
}
section {
padding : 20px;
margin : 10px;
}
.more {
display : none;
font-size : 20px;
}
button {
margin : 15px;
padding : 10px;
border : none;
background-color : blue;
font-size : 18px;
display : block;
cursor : pointer;
color : wheat;
outline : none;
}
</style>
</head>
<body>
<script>
<!-- Script to add read more and read less -->
$(document).ready(function(){
$(".rdmore").click(function(){
$(this).siblings('.limit').toggle();
if($(this).text() == 'Read More'){
$(this).text( 'Read Less' );
$(this).prev().toggle();
}
else{
$(this).text( 'Read More' );
$(this).prev().toggle();
}
});
});
</script>
<h3> This an example of jQuery read more : </h3>
<section>
<div calss = "contid">
This is a sample limited text page content to be visible to the user.
<span class = "limit"> ..... </span>
<span class = "more" style = "font-size : 15px;">
This is a sample text page content to be visible to the user after clicking the read more button. This is a sample text page content to be visible to the user after clicking the read more button.
</span>
<button class = "rdmore"> Read More </button>
</div>
</section>
</body>
</html>An output of the above code is –
Once we click on the p text content, the output is –
In the above code, first the div element content display, then span element content is hidden by using the class “more” and then the read more button is displaying. On click of the read more button it displays the previous content (span element) by toggle the display value property as “$( this ).prev().toggle();”, so it displays the hided span content, as we can see in the above output.
Example #2
Example of jQuery read more to show the hide text content by using the string length property and substring () function –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery read more </title>
<!-- jQuery CDN -->
<script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src = "assets/jquery.min.js"></script>
<style>
.rdmore .moretext{
display: none;
}
</style>
<script>
$(document).ready(function(){
var maxLength = 100;
$( ".rdmore" ).each(function(){
var str = $(this).text();
if($.trim( str ).length > maxLength){
var nstr = str.substring(0, maxLength);
var rmstr = str.substring(maxLength, $.trim( str).length);
$(this).empty().html(nstr);
$(this).append(' <a href = "javascript:void(0);" class = "readmore"> read more... </a>');
$(this).append('<span class = "moretext">' + rmstr + '</span>');
}
});
$( ".readmore" ).click(function(){
$(this).siblings( ".moretext" ).contents().unwrap();
$(this).remove();
});
});
</script>
</head>
<body>
<h3> This an example of jQuery read more : </h3>
<div class = "rdmore" style = "font-size : 15px;" >
This is a sample text page content to be visible to the user after clicking the read more button. This is a sample text page content to be visible to the user after clicking the read more button.
</div>
</body>
</html>An output of the above code is –
Once we click on the first paragraph, the output is –
In the above code, firstly the div element content of length 0 to 99 is displaying by using the string substring() function as “content.substring(0, maxLength);”, then the read more link is displaying on click of which the remaining content will display from 100 to end by using again the string substring() function as “content.substring( maxLength, $.trim( content ).length);”, so it displays the hided content, as we can see in the above output.
Conclusion
This is a guide to jQuery read more. Here we discuss the jQuery read more is used to hide the content of the page of the specified size and then display the hidden content on clicking the read more button. You may also look at the following article to learn more –
