Hello there, programmers! In this post, we’ll use HTML and CSS to make a “Read More, Read Less” button. The Read more and Read less buttons come in handy when you want to conceal some details while still providing readers a feel of what the article or post is about.

Hope you enjoy our blog so let’s start with a basic HTML structure for Read Less and Read More Button.

Code by	N/A
Project Download	N/A
Language used	HTML.CSS,JavaScript
External link / Dependencies	NO
Responsive	YES

HTML Code for Read More Button

<h1>Hello world</h1>
<p class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis
    veritatis animi aliquam laboriosam velit, esse, blanditiis aspernatur sint
    est magnam debitis delectus in fuga fugiat repellat dignissimos ipsum
    necessitatibus corrupti veniam reprehenderit,<span class="dots"> ...</span>
    <span class="moreText">
        assumenda sapiente expedita labore atque! Sint velit cumque minus
        pariatur quisquam, beatae ab quo impedit eaque soluta vel laboriosam
        itaque similique iste ex aut in nihil dolorem consequuntur possimus
        eligendi eos optio ipsam! Sint ullam voluptate obcaecati asperiores eos
        vero sed iusto magnam ad, vel repellat quidem? Omnis fugit accusantium,
        illo quos eos odio consectetur et nemo excepturi deleniti dolorum
        adipisci dolores delectus possimus libero, sed iusto dolorem? Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Reiciendis neque
        distinctio modi dicta ut aperiam molestiae quos incidunt dolore iure
        officia! Blanditiis sint delectus quam quae nulla.</span
    >
</p>
<button class="read-more-btn">Read More</button>

Using the <p> tag and the class “text,” we will insert a 50–60 word lorem ipsum paragraph into our HTML code. We will also add some additional text to our website using the <span> tag, and inside that additional text, we will insert a lorem ipsum that will be displayed to the user when they click the “read more” button we will create using the button tag.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

There is all the HTML code for Read Less and Read More Button. Now you can see output without CSS and JavaScript then we write css and JavaScript for our Read Less and Read More Button.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

CSS Code for Read More Button

body {
    font-family: "Montserrat";
    text-align: justify;
    max-width: 800px;
    margin: 0 auto;
    background-color: rgb(18, 23, 27);
    color: aliceblue;
}
.text {
    font-size: 24px;
}
.moreText {
    display: none;
}
.read-more-btn {
    padding: 15px 60px;
    background-color: rgb(149, 170, 197);
    color: rgb(53, 49, 49);
    border: none;
    outline: none;
    font-size: 20px;
    cursor: pointer;
}
.text.show-more .moreText {
    display: inline;
}
.text.show-more .dots {
    display: none;
}

Step1:We will style our read more and read less buttons by using the body tag selector. For that, the font family will be set to “Monteserrat” using the font-family property; the text alignment will be set to “justify” using the text-align property; and the background colour will be “black.”

50+ HTML, CSS & JavaScript Projects With Source Code

Step2:We will now style our read more and read less buttons using the class selector. When the user presses the button, the hidden extra text will reveal itself.

Now we complete our Css Code section.now we need only JavaScript functionality to read more and read less Button. Here is our updated output with HTML and Css.

 

JavaScript Code for Read More Button

const readMoreBtn = document.querySelector(".read-more-btn");
const text = document.querySelector(".text");
readMoreBtn.addEventListener("click", (e) => {
    text.classList.toggle("show-more");
    if (readMoreBtn.innerText === "Read More") {
        readMoreBtn.innerText = "Read Less";
    } else {
        readMoreBtn.innerText = "Read More";
    }
});

Now that the read more button is enabled, the button text and functionality will switch to read less when the user hits it. To do this, we will first pick the button element using the document.queryselector() method and then add an event listener to the button. The readmore and readless buttons will essentially alternate.

Portfolio Website using HTML and CSS (Source Code)

Now we completed all our HTML, CSS & JavaScript coding for the reading Less and Read More Button.
You can output video, Screenshots at the bottom.

Final Output Of Read More Button: