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.
excerpt functions
