You are currently viewing Read Less and Read More Button Using HTML,CSS & JS

Read Less and Read More Button Using HTML,CSS & JS

Read Less and Read More Button Using HTML,CSS & JS

Welcome to the codewithrandom blog. In this blog we learn how to create Read Less and Read More Button. We use HTML,CSS and Javascript for this Read Less and Read More Button.

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

HTML Code for Read Less and 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>

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

Read Less and Read More Button Using HTML,CSS & JS
Read Less and Read More Button Using HTML Code Preview

 

CSS Code for Read Less and 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;
}

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.

 

Read Less and Read More Button Using HTML,CSS & JS
Read Less and Read More Button Using HTML,CSS Code Preview

 

JavaScript Code for Read Less and 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 we completed all our HTML, CSS & JavaScript coding for the reading Less and Read More Button.
You can output video, Screenshots at the bottom.

Read Less and Read More Button Using HTML,CSS & JS
Read Less and Read More Button Using HTML,CSS & JS

 

Read Less and Read More Button Using HTML,CSS & JS
Read Less and Read More Button Using HTML,CSS & JS

In this post, we learn how to create Read Less and Read More Button with simple coding of HTML & CSS, and Javascript. If we did a mistake or any confusion please drop a comment to give a reply or help you in easy learning.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

written by – codewithrandom/Anki 

This Post Has 0 Comments

Leave a Reply