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

Leave a Reply

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