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

11
Leave a Reply

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

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

cw
Guest
cw

Thank you so much

max
Guest

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?

Teresa
Guest
Teresa

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

prem
Guest
prem

Thanks for your solution it works good.

Abdur Rahim
Member

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

john
Guest
john

Thank You it works well