How to add Read more... Read less action using JavaScript and HTML

It is very simple to create "Read more.." "Read less" action using pure JavaScript with 10 line of JavaScript code.

Here, let's see an example with preview (DEMO) and you can copy the code to use it in your website.

To understand how this script executes and play the action of showing hidden content on clicking the "Read more" button.

Complete code

This is a sample paragraph truncated with Read more text. To Read more on this paragraph, you need to click the "Read more" text and expand the remaining content. Read more... Yes! you have clicked the Read more link and these are remaining text content. Now, you can click the "Read less" to hide these extended text content. (Read less)

This is another sample paragraph. This paragraph also works the same way as seen above. You can check whether this work by clicking the "Read more" text here. Read more... Success! You clicked and expanded the remaining contents. Now, you can click the hide link to hide these extended text content. (Read less)

Working Preview (DEMO)

This is a sample paragraph truncated with Read more text. To Read more on this paragraph, you need to click the "Read more" text and expand the remaining content. Read more... Yes! you have clicked the Read more link and these are remaining text content. Now, you can click the "Read less" to hide these extended text content. (Read less)

This is another sample paragraph. This paragraph also works the same way as seen above. You can check whether this work by clicking the "Read more" text here. Read more... Success! You clicked and expanded the remaining contents. Now, you can click the hide link to hide these extended text content. (Read less)

How to add read more read less action using JavaScript?

Instructions for adding Read more Read less toggle using JavaScript

Keep note the following points while using the above code. it will help you further develop your own:

  • Yo need to copy the entire JavaScript to proper fuctionaly.
  • The class attributes are not required. I have just used CSS framework class attributes just for decorative look and better appearance.
  • The role attribute is important. You can see the role sttributes like role="show" and role="hide" are found in the JavaScript code.
  • You can rename the role attribute anything you wish, but the same to be replaced in the JavaScript code also.

Read more, read less button using pure JavaScript

Read below points to understand how this code works and develop it further as per your related requirements. You will also understand what are all the features and usability available in this JavaScript?

  • Only 10 lines of JavaScript code to make read more and read less action buttons.
  • No need to write inline JavaScript in the HTML element such as onClick events.
  • Only use role attributes where visitors click to expand or display the hidden or truncated content as shown in the example.
  • This JavaScript is enough and executes commonly for all the elements all over the page wherever you write the role attributes role="show" and role="hide".
  • You can use this JavaScript by slightly manipulating it for many other utilities like accordion, modals, collapse and so on.

Simple method to create read more... read less action using pure JavaScript and HTML

I hope this article explains well how to add read more... read less action with HTML and JavaScript. Also, this article will be the solution for those who are searching for hoe to add read more... read less action using JavaScript, add show more... show less action using HTML and JavaScript, read more... read less functionality using pure JavaScript, create read more read less button using pure JavaScript, create show more show less button using JavaScript, create show more / show less toggle using JavaScript, create read more raed less toggle using JavaScript.

Articles related to CSS and JavaScript

Post a Comment

0 Comments