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

9 thoughts on “Custom Read More and Read Less using jQuery/ Javascript Function.”

  1. 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?

    1. Hi Teresa, glad to help 🙂
      I understand your concern here, this method helps in a simple text without any HTML tags as I have used text() jQuery function this will only get the text out of container … If you want to get HTML Tags or styling you can simply replace text() with html(). But I am afraid if HTML got trim from a point where character limit end it can result worse 🙂 but you can try it for sure. Let me know if it worked 😛

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

Leave a Reply

Your email address will not be published. Required fields are marked *