How to add Read More in HTML?

Leave a Comment / CSS, HTML, JavaScript / By

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

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:-

<h1>Code Blockx</h1>
        <h2>Read More</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id=”dots”>…</span><span id=”more”>erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span>
        </p>
        <button onclick=”myFunction()” id=”myBtn”>
            Read More
        </button>

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:-

 #more {
            display: none;
        }
        body {
            background-color:aquamarine;
        }
        button {
            background-color: black;
            color: white;
            border-radius: 5px;
            height: 30px;
            width: 90px;
            cursor: pointer;
        }

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:- 

function myFunction() {
            var dots = document.getElementById(“dots”);
            var moreText = document.getElementById(“more”);
            var btnText = document.getElementById(“myBtn”);
           
            if (dots.style.display === “none”) {
                dots.style.display = “inline”;
                btnText.innerHTML = “Read more”;
                moreText.style.display = “none”;
            }
            else {
                dots.style.display = “none”;
                btnText.innerHTML = “Read Less”;
                moreText.style.display = “inline”;
            }
            }

The Full Code for Read More in HTML is:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Read More</title>
        <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    </head>
    <style>
        #more {
            display: none;
        }
        body {
            background-color:aquamarine;
        }
        button {
            background-color: black;
            color: white;
            border-radius: 5px;
            height: 30px;
            width: 90px;
            cursor: pointer;
        }
    </style>
    <body>
        <h1>Code Blockx</h1>
        <h2>Read More</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id=”dots”>…</span><span id=”more”>erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span>
        </p>
        <button onclick=”myFunction()” id=”myBtn”>
            Read More
        </button>
        <script>
        function myFunction() {
            var dots = document.getElementById(“dots”);
            var moreText = document.getElementById(“more”);
            var btnText = document.getElementById(“myBtn”);
           
            if (dots.style.display === “none”) {
                dots.style.display = “inline”;
                btnText.innerHTML = “Read more”;
                moreText.style.display = “none”;
            }
            else {
                dots.style.display = “none”;
                btnText.innerHTML = “Read Less”;
                moreText.style.display = “inline”;
            }
            }
        </script>
    </body>
</html>

OUTPUT

Read More in HTML
Read Less in HTML

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.

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *