Custom Read More and Read Less using jQuery/ Javascript Function.

You can always find jQuery plugins or libraries for any type of requirement. But if we try to add plugins for every specific requirement, then we end up with a bunch heavy loaded library set which can take much time to load and can badly affect page efficiency. So I personally prefer to always try to code some specific function or method which can easily do the stuff without causing any hassle to page load time and including big sized libraries which always and have not required features which we will never need in future.

Here we will talk about very simple but very important function which can make longer texts look more concise and user-friendly. When we have a web page with longer texts in every section, it becomes very difficult for users to scroll those lengthy documents either they are on desktops or mobile devices. So “Read More” functionality comes to the rescue. This feature adds a read more link after longer texts trimming to 2-3 lines. So if a user wants to read the whole text, they can simply click on “Read More” and see the whole text.

Demo Here

Let’s begin this easy implementation.


Step 1 – You need to include the jQuery library and Some Style CSS, After adding your page header section will look something as follows.


Step 2 – Now add that function and click event which will replace longer texts to short snippets with “Read More” link.


Step 3 – Now you can add text in any DIV or P tag with above class “addReadmore” and also class “showLessContent” as follows:



Now your final HTML will look something like as follows:



You can have a look at Demo here.


Let me know in comment section if you have any feedback

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

6 Comment threads
3 Thread replies
Most reacted comment
Hottest comment thread
7 Comment authors
Abdur RahimpremJolly.exeTeresamax Recent comment authors
newest oldest most voted
Notify of

With your solution, I solved my problem.
Thank you Admin..


Thank you so much


Thanks, it worked.

However, it only works when am logged in as an admin into my wordpress website. Once i logged out, it just displays all the text without the “read more” link.

Any help please?


This worked great for me but it stripped out all of my text styling. Any help on this would be great! Thank you!


Thanks for your solution it works good.

Abdur Rahim

Hello, Thanks for your implementation. But one question, in show more area link tag not working. How to fix that issue.


Thank You it works well