You are currently viewing Read More And Read Less Using Html Css Javascript

Read More And Read Less Using Html Css Javascript

Read More And Read Less Using Html Css Javascript

Welcome🎉 to Code With Random blog. This blog teaches us how we create a Read More And Read Less. We use HTML, Css, and javascript for the Read More And Read Less. I hope you enjoy our blog so let’s start with a basic HTML structure for the Read More And Read Less. 

HTML Code

Table of Contents

 <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 More And Read Less. Now, you can see an output with a Read More And Read Less then we write javascript for the Read More And Read Less.

output


CSS code

 body {  
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
height: 100vh;
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;
}

Css Updated output

 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";
}
});

Final output

Now that we have completed our javascript section, our updated output with javascriptHope you like the Read More And Read Less. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

This post teaches us how to create a Read More And Read Less using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code By – Raj Shukla
Check out more…..

Leave a Reply