In this blog, you will learn about adding a read more in HTML. It is a button that will show users more detail on the topic hidden by the developer to make the website look good. It can also be used to hide the same data with the help of the same button. Let’s learn in detail to add read more in HTML:-
![Show more in HTML](https://codeblockx.com/wp-content/uploads/2023/01/codeblockx-27-768x432.png)
To create a read more in HTML we need to first write the basic HTML tags and the Paragraph on which you want to add the Read More property. Just take care of that you add a span tag and Three dots from where you want to start hiding the text and then close the same span tag.
Now add one more span tag and assign it with a different id and write all the content you want to show to users once they click on the read more button. Your HTML code should look like this:-
Now we will add the CSS style sheet to it. Keep the #more id the same as it will not display full text initially when a user opens the website. The rest of the style sheet can be changed to your preference on how you want to make your website look. So the CSS code we used for this is:-
We will write all the JavaScript code in the style tag in the body tag or you can also add it separately in the script sheet. This JavaScript code will show all the text once the user clicks on Show More and will hide all the text when the user clicks on Show Less. So the code for this is:-
The Full Code for Read More in HTML is:-
Index.html
OUTPUT
![Read More in HTML](https://codeblockx.com/wp-content/uploads/2023/01/Screenshot_20230115_122216-768x358.png)
![Read Less in HTML](https://codeblockx.com/wp-content/uploads/2023/01/Screenshot_20230115_122235-768x243.png)
Hope this blog was helpful to you and you got the answer to your question. You can also Add a Site Logo or Favicon to this project to make it look good. So if you don’t know about adding it then check our full detailed blog on it. It will be helpful to you.
Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible.