YogeshChauhan . com

How to add Read More Read Less Button using JavaScript?

in JavaScript on 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

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

Styling Lists with CSSCSSHow to Use ROLLUP Operator in SQL and MySQL?SQL/MySQL4 different Ways to Get JavaScript OutputJavaScript3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptperspective property in CSSCSSWhat’s new in WordPress 5.5?WordPress