Implementing the ‘Read More’ Functionality Using jQuery
The Read More functionality is a very familiar feature that you will come across on blogs or websites with long content, like news websites. This feature allows you to compress content and, therefore, put more content in less space. This also gives the user the freedom to skip the content if it’s not relevant to them. Other advantages include:
- Speeding up the loading process as it allows the implementation of lazy loading. Instead of loading the content in full, the remaining part can be fetched by clicking ‘read more’.
- Improves website monetization by increasing page views. The website owners can also put ads just below ‘read more’ buttons to increase revenue since it increases the chance that users will click on the ad.
- Provides quick access to more content.
Creating the “read more” functionality is very simple. It can be easily created using HTML, CSS and a few lines of jQuery code. This post will guide you through creating a read more toggle feature using jQuery. First, we’ll create the “read more” link for the elements, showing the first few lines and hiding the rest of the content. Next we’ll ensure that clicking on the “read more” displays the complete content and also changes the text of the link to “Read less”. Finally, we’d add an optional functionality to hide the “Read more” link after it is clicked.
Let’s begin…
HTML Markup
In the HTML, define a div element with some very long text. The div element has a CSS class called “longtext”, which will be used for selecting this element using jQuery CSS class selector. In this post, there is only one div element on the page, but you may have more than one such element on the page you create. Make sure to assign “longtext” CSS class to all such elements. This will ensure that the jQuery code creates ‘read more’ toggles for each of these elements.
The following CSS classes are used to control the visibility of the content based on the ‘read more’ toggle button. The moretext span CSS class will hide the extra content and links CSS will be applied to the ‘read more’ anchor tag.
.moretext span {
display: none;
}
.links {
display: block;
}
jQuery Code
The jQuery part is pretty straightforward. It first hides the long content and adds the link ‘Read more.’ Then it attaches a click event to the ‘read more’ link to toggle the hidden text and the button text.
Here is the complete jQuery code:
$(document).ready(function() {
var nInitialCount = 150; //Intial characters to display
var moretext = "Read more >";
var lesstext = "Read less";
$('.longtext').each(function() {
var paraText = $(this).html();
if (paraText.length > nInitialCount) {
var sText = paraText.substr(0, nInitialCount);
var eText = paraText.substr(nInitialCount, paraText.length - nInitialCount);
var newHtml = sText + '...' + eText + '' + moretext + '';
$(this).html(newHtml);
}
});
$(".links").on('click', function(e) {
var lnkHTML = $(this).html();
if (lnkHTML == lesstext) {
$(this).html(moretext);
} else {
$(this).html(lesstext);
}
$(this).prev().toggle();
e.preventDefault();
});
});
This jQuery code performs the following functions:
- First, it defines global variables moretext and lesstext to hold the button text and also defines the nInitialCount variable to store the number of characters displayed before showing the ‘read more’ toggle link. In this post, the value of nInitialCount is set to 150, but you are free to modify this as per your need.
- It then attaches jQuery each() function to the elements with longtext CSS class. The each() function allows you to iterate through a collection. Inside the loop, first check if the content length is more than initial character count. If yes, then it grabs the initial displayed text and stores it in sText and also grabs the remaining text and stores it in eText. To extract the text, JavaScript substr() method is used. Once this is done, the code forms a new HTML with both of these text variables, some span elements and the anchor tag for the link. Here, the extra text is kept inside a span element whose parent element is also span with CSS class moretext. We have already defined a CSS class to hide this.
The new HTML is then assigned to the longtext CSS class element. Here, the anchor tag link is decorated with CSS class links. At the end of this function, the div will show the first 150 characters, followed by a ‘read more’ link. - Finally, it attaches a click event to the newly added link using CSS class selector. In the click event, it toggles the value of the link via performing a comparison with the current value and lesstext variable value. If the link shows ‘read more’ text, then it assigns ‘read less’ text or vice versa. Then, the code toggles the text using the jQuery prev() method. The prev() method returns you to the previous object.
You can check out the demo here!
If you just want to hide the ‘read more’ button once clicked, then use the following jQuery code,
$(".links").on('click', function(e) {
$(this).hide();
$(this).prev().toggle();
e.preventDefault();
});
Conclusion
This post provides a simple jQuery solution for implementing ‘read more’ toggle functionality. The jQuery code has 2 parts. In the first part, it attaches the ‘read more’ link, displays only the first 150 characters and hides the remaining content. In the second part, the ‘read more’ button becomes clickable to toggle the text. Based on your need, you can change the value of initial characters to display. This functionality is very useful for long form websites, and we're sure it will come in handy for your work one day. Enjoy!
