How to add Read More Read Less Button using JavaScript?
July 30, 2019

In this blogpost I am going to show you how to add a button which hides extra contents of the paragraph or paragraphs and show that contents when user clicks on a button. This way you don’t need to show user all the content data but the abstract only and if user wants to read more, he can click on the button to get more content.

First of all add simple HTML paragraph which you want user to read, like a blog post or about us page. I am adding my about blog content, you can add any content you want.

In above HTML code we have our full contents in more than one paragraph. I want user to see first two lines so after first two lines, I’ve added span element with id=dots and another span element with id=content. The content I want to show on click is after the second span element.

After that I am closing span and p tags.

At the end I’ve added button with id and onclick event handler which you already know that when user clicks on it, it will go to the readMoreFunction() function in JavaScript and show the contents.

I’ve added a bit of CSS style. You can add extra CSS if you want but we definitely need one following line in our style tag.

The style above stops the browser to display the contents of span tag with id=content. So, user won’t be able to see the contents after the first two lines.

So, now just one final thing left to do, which is to show user the content when he clicks on the button. For that we are going to use JavaScript.

Take a look at the code below.

I’ve just mentioned while discussing about HTML code, that we will call a function when user clicks on the button.

In the above JavaScript code I’ve added a function readMoreFunction() and the actions to perform when it gets tha function call.

I’ve created 3 variables. In dots I am adding the value of span with id=dots. In contentText we have all the extra content and to change to texts of button I am saving the value in a 3rd variable.

Now we are using HTML display property to check the value of that property for span with id=dots. If the display property value is none that means the extra content has already been displayed using the else condition. I know, it’s a bit tricky as we are not hiding the span with id=dots but we are checking if it’s hidden.

Now, if the first condition is true which means the span with id=dots is hidden then we are changing it to inline when the user clicks on the button and we are also changing the value for button texts as well, which is “Click to Read More About the Blog”. Also, we are hiding the extra contents.

The above process was for hiding the extra contents by clicking on the button. The else condition is when the extra content is hidden and user clicks on the button to read more.

In the else condition, we are changing the span with id=dots to none as we will replace it with all the additional contents. Also, we are changing the button texts to “Read Less” so that user can click on it again and the extra contents will be hidden.

Read more on w3schools


Leave a Reply

Most Read

#1 How to set opacity or transparency using CSS? #2 Pagination in CSS with multiple examples #3 How to check if radio button is checked or not using JavaScript? #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 How to add Read More Read Less Button using JavaScript?

Recently Posted

Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post? Feb 22 WordPress: How to print ACF repeater field values? Feb 22 WordPress: How to print ACF array field values? Feb 21 WordPress: How to get field values in Advanced Custom Fields? Feb 21 WordPress: How to add a Search Icon in Menus with toggle effect using jQuery?

You might also like these

How to Remove PHP File Extensions From Your Website URLs?PHPHow to create a pricing table using flex in CSS?CSSGive buttons accessible namesUI/UXHow to concatenate variable with string in Swift?Swiftapply_filters function in WordPressWordPressCSS Overflow Property with ExamplesCSS