A Read More and Read Less button is a great way to keep your website content organized and concise, while still giving visitors the option to read more if they are interested. This button is especially useful for long blog posts or articles, as it allows you to hide some of the text without sacrificing readability.
In this tutorial, I'll show you how to create a Read More and Read Less button using HTML, CSS, and JavaScript. You can see demo in below YouTube video.
You’ll learn in this blog:
- How to Use Blur Effects to Improve Your Read More and Read Less Button
- Read More and Read Less Functionality.
Video Tutorial on Read More & Read Less Functionality.
Read More & Read Less Button Functionality.
How we going to make this read more & read less functionality and how it looks like (Overview)?
We going to set the minimum height initially to text box (description box), when user click on read more button, we going to set text box height to auto and read more button text to read less text.
We going to make the text box height to auto by toggling the separate class on click inside the description box using JavaScript.
Let’s start making this step by step.
Step 1: Create basic structure for read more and read less button functionality.
Let’s create basic structure of html and add basic structure of read more button functionality.
So, we going to add title, description text (this part we going to make expand and collapse) and button.
HTML
<div class="container">
<div class="box">
<h2>Lorem ipsum dolor sit amet.</h2>
<div class="description_box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut at enim illum nostrum, nesciunt non adipisci repudiandae numquam sed impedit hic eligendi, aperiam sunt provident ullam nemo ratione molestias iure doloribus eaque omnis, mollitia laborum? Assumenda explicabo eveniet accusamus eligendi deserunt voluptates commodi quis itaque eius dolore saepe ad eos blanditiis, quidem nulla, soluta error alias totam inventore asperiores in sequi esse quod? Ad in doloribus numquam. Laboriosam maxime explicabo placeat esse quam perferendis, fugiat culpa optio perspiciatis libero quo harum, corporis dignissimos quas aperiam nam? Animi, tempore, placeat qui enim sunt modi odio saepe quasi iusto incidunt vitae impedit.</p>
<button type="button">Read More</button>
</div>
</div>
<div class="box">
<h2>Lorem ipsum dolor sit amet.</h2>
<div class="description_box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut at enim illum nostrum, nesciunt non adipisci repudiandae numquam sed impedit hic eligendi, aperiam sunt provident ullam nemo ratione molestias iure doloribus eaque omnis, mollitia laborum? Assumenda explicabo eveniet accusamus eligendi deserunt voluptates commodi quis itaque eius dolore saepe ad eos blanditiis, quidem nulla, soluta error alias totam inventore asperiores in sequi esse quod? Ad in doloribus numquam. Laboriosam maxime explicabo placeat esse quam perferendis, fugiat culpa optio perspiciatis libero quo harum, corporis dignissimos quas aperiam nam? Animi, tempore, placeat qui enim sunt modi odio saepe quasi iusto incidunt vitae impedit.</p>
<button type="button">Read More</button>
</div>
</div>
<div class="box">
<h2>Lorem ipsum dolor sit amet.</h2>
<div class="description_box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut at enim illum nostrum, nesciunt non adipisci repudiandae numquam sed impedit hic eligendi, aperiam sunt provident ullam nemo ratione molestias iure doloribus eaque omnis, mollitia laborum? Assumenda explicabo eveniet accusamus eligendi deserunt voluptates commodi quis itaque eius dolore saepe ad eos blanditiis, quidem nulla, soluta error alias totam inventore asperiores in sequi esse quod? Ad in doloribus numquam. Laboriosam maxime explicabo placeat esse quam perferendis, fugiat culpa optio perspiciatis libero quo harum, corporis dignissimos quas aperiam nam? Animi, tempore, placeat qui enim sunt modi odio saepe quasi iusto incidunt vitae impedit.</p>
<button type="button">Read More</button>
</div>
</div>
<div class="box">
<h2>Lorem ipsum dolor sit amet.</h2>
<div class="description_box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut at enim illum nostrum, nesciunt non adipisci repudiandae numquam sed impedit hic eligendi, aperiam sunt provident ullam nemo ratione molestias iure doloribus eaque omnis, mollitia laborum? Assumenda explicabo eveniet accusamus eligendi deserunt voluptates commodi quis itaque eius dolore saepe ad eos blanditiis, quidem nulla, soluta error alias totam inventore asperiores in sequi esse quod? Ad in doloribus numquam. Laboriosam maxime explicabo placeat esse quam perferendis, fugiat culpa optio perspiciatis libero quo harum, corporis dignissimos quas aperiam nam? Animi, tempore, placeat qui enim sunt modi odio saepe quasi iusto incidunt vitae impedit.</p>
<button type="button">Read More</button>
</div>
</div>
</div>
CSS
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background-color: #ec407a;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 100%;
height: 100vh;
overflow-y: auto;
}
.box{
width: 500px;
background-color: #fff;
margin: 10px auto;
padding: 20px;
border-radius: 20px;
}
.description_box{
height: auto;
overflow: hidden;
line-height: 1.5;
padding: 20px 0px;
position: relative;
}
button{
position: absolute;
right: 0px;
left: 0px;
bottom: 0px;
border: none;
font-size: 20px;
font-weight: bold;
color: blue;
background-color: transparent;
padding: 20px 0px;
z-index: 1;
cursor: pointer;
}
Output:
As you can see in the above image that all text is visible right now and the button is on the text. That's because we have set position absolute to it with other stylings.
Now let's set the minimum height and shadow above the read more button.
CSS
.description_box{
height: 150px;
/* height: auto; */
overflow: hidden;
line-height: 1.5;
padding: 20px 0px;
position: relative;
}
button:after{
position: absolute;
content: "";
right: 0px;
left: 0px;
bottom: 0px;
height: 80px;
background: linear-gradient(180deg , #ffffffa1 , #fff , #fff);
z-index: -1;
}
Output:
As you can see the shadow above the read more button is created and the height of text is also decreased.
Now let's add functionality to expand the text on click on read more button.
For expanding the text (class="description_box") we'll create and add the separate class inside element with class="description_box" with the name active with css property to expand the text (height: auto).
Along with expanding the text we'll also remove the shadow and make the button below the text (right now the button is on the text). So for that also we'll create a separate class with the name active_button (for button to go below the text) and active_button:after class for removing the shadow. We'll add this active_button class inside button (button tag).
CSS
.active{
height: auto;
}
.active_button{
position: unset;
width: 100%;
}
.active_button:after{
background: transparent;
}
After creating separate classe. Let's t toggle the classes:
- active class inside the element with class="description_box"
- active_button class inside element with tag button.
We'll toggle this classes using JavaScript.
Step 2: Add functionality to read more and read less button functionality..
Now let’s add functionality to a read more and read less button to expand and collapse description text (class="description_box").
As we have created more boxes so for selecting all at once we going to use for each method of JavaScript.
After selecting all elements with class value description_box, we going to toggle active class in each elements for expand and collaps functionality.
And based on the presence and absence of active class inside element with class="description_box". We'll add and remove the active_button class inside button (for changing its position from on the text to below the text and from below the text to on the text and also to remove and add shadow above this button).
We also change the text of button from read more to read less and read less to read more according to description box state (expanded or collapsed).
JavaScript
let description_box = document.querySelectorAll(".description_box");
description_box.forEach(element => {
let button = element.querySelector("button");
button.onclick = function(){
element.classList.toggle("active");
button.classList.toggle("active_button");
if(button.classList.contains("active_button")){
button.innerHTML = "Read Less";
}else{
button.innerHTML = "Read More";
}
}
});
So that’s it you can see demo in above video.
You may like:
- How to show and hide the sidebar menu using HTML and CSS.
- How to create a side navigation menu using HTML, CSS and JavaScript that close when click outside of it.
- How to create button that border rotate when hover using HTML & CSS.
- How to create buttons with simple CSS hover effects.
Final code:
So that’s how you can make this read more and read less functionality using html CSS and JavaScript. If you have any query or suggestion you can write in the comment section.
Share your thoughts.