Read More Read Less Button using HTML, CSS and JavaScript
Hello Coders! In This Article, We Would make A Simple Project We Will learn how to Create a Read More Read Less Button using HTML, CSS, and Javascript. In this Project, we have a button and 500-word content if you click on show more content shows in div, and when you click on show less div content close and we can see only 100-word lines that project.
You might want to use these buttons in multiple posts or paragraphs. However, writing separate code for each button appears to be time-consuming. It may also have an impact on the performance of your website.
In this tutorial, we will create a Read More Read Less button for multiple paragraphs using only a few lines of code.
This Article Will Be For Beginners And By The End Of The Article You Will Be Creating Your Read More Read Less Button using HTML, CSS, and JavaScript.
50+ HTML, CSS & JavaScript Projects With Source Code
Nowadays everyone tries to include simplicity while creating content so that it doesn’t become lengthy and the user who is surfing doesn’t get bored or doesn’t have to go through some vast content. So for that, we have an idea called to create a button known as Read More Read Less. On that note, I Welcome you to Codewithrandom with this new blog in which we’ll see the creation of the Read More and Read Less Button.
I hope you have got an idea about this project.
Preview of the project
How to create Read More Read Less Button using HTML & JavaScript?
In Today’s Session, We Will Use HTML, CSS, And JavaScript To Complete This Project. We Will Go In Three Steps.
- Step 1 – The HTML (Hypertext Markup Language) Code Will Help Us To structure the content UI, paragraph, button etc.
- Step 2 – The CSS (Cascading Stylesheet) Code Will Help To Style The Project With Suitable Bgcolor And Some Alignment To The Necessary Elements, and button design.
- Step 3 – Then The JS(JavaScript) Code, which would be help us to add fuctionality on button and the content box.
Simple Portfolio Website Using Html And Css With Source Code
I Hope You Have Got An Idea About The Project.
| Project Name | Read More Read Less Button |
| Code By | @Harshh9 |
| Written By | Harsh Sawant |
| Project Download | Copy Code From Given Code Snippets And Codepen Embed |
| Language Used | HTML, CSS, And JavaScript |
| External Link / Dependencies | No |
| Responsive | No |
Step 1 – HTML Code for Read More Read Less Button
In this HTML Code we have created the structure in which we have added 2 paragraphs to make it little lengthy content.
ADVERTISEMENT
but we have also created a show more label, which Id name is show-more, where if the user is willing to read further simply he can click and go through it. Let us style the project using CSS.
ADVERTISEMENT
ADVERTISEMENT
<head>
<meta charset="utf-8">
</head>
<body>
<div id="content">Diwali is one of the most important festivals in Hindu culture. It is one of the most important holidays in the Hindu calendar. Diwali gets its name from the Sanskrit word ‘Deepavali’ that roughly translates to ‘a row of lights.’ It is a great time to have fun with your family and friends. People decorate their houses with oil lamps and fairy lights at night. They cook delicious food and share them with their neighbors. It is a festival of lights; every street is lit up with beautiful lights. It spreads cheer and joy among people and makes them fall in love with their culture.
<br>
<br>
Festivals have been made to reinforce strong bonds between families and friends, and Diwali is the best example. Everyone goes home for Diwali and celebrates it with their families. It is a national holiday, so everyone enjoys the festival without worrying about work. It gets more exciting at night because lots of sky-lanterns are released into the air that flies high and lights up the night sky. Diwali teaches us to be patient for good things in life.
Children keep waiting for many days to enjoy that bite of their favourite sweet. The houses are thoroughly cleaned to clean them of dirt. Cleanliness is very important as it would determine your wellness and health. It has been a part of Hindu culture for a very long time and fosters the moral lesson of “Good people always win over bad ones.</div>
<a id="show-more">SHOW MORE</a>
</body>
</html>ADVERTISEMENT
HTML Output:
ADVERTISEMENT
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Step 2 – CSS Code for Read More Read Less Button
In this CSS code we have style the project calling the defined elements and attributes we have defined a body color, width, padding, font-family, font-size etc.
Basically the content that is defined in the HTML Code with the help of CSS we have aligned it in the proper manner, so that it looks systematically not messy. Let’s code the JavaScript part to make this project functionality.
body {
background: orange;
}
#content {
width: 50%;
background: #fff;
padding: 20px;
font-family: Sans-Serif;
font-size: 18px;
color: #444;
margin: 0 auto;
max-height: 180px;
overflow: hidden;
/* Set Transitions */
transition: max-height 0.7s;
}
#content.open {
max-height: 1000px;
/* Set transitions */
transition: max-height 0.7s;
}
#show-more {
width: 20%;
background: #1594e5;
color: #fff;
font-family: sans-serif;
display: block;
cursor: pointer;
text-align: center;
padding: 15px;
margin: 10px auto;
}We will style the website’s body using the body tag generator. We will change the background to “orange” using the background property.
Create Ping Pong Game Using JavaScript (Source Code)
The width will now be set to “50%” using the id Selector (#content), the background will be set to “white,” and the spacing will be added around the paragraph with 20px padding. Additionally, we’ll set the maximum height to 0.7 seconds and add a transition to our learn more paragraph.
CSS Output:
Restaurant Website Using HTML And CSS With Source Code
Step 3 – JavaScript Code for Read More Read Less Button
In This Simple JavaScript Code we have created two variables for the html paragraph content and show more button are content and button
We Have Added A onclick function to the if(), else{} statement in the onclick function to make condition, Which Once It Satisfies The Condition It Will Expand The Box And Change The Name From More To Less.
Let’s See The Final Output Of The Project.
var content = document.getElementById("content");
var button = document.getElementById("show-more");
button.onclick = function () {
if(content.className == "open"){
//shrink the box
content.className = "";
button.innerHTML = "SHOW MORE";
} else {
//expand the box
content.className = "open";
button.innerHTML = "SHOW LESS";
}
};Read also:
10+ Javascript Projects For Beginners With Source Code
Final Output Read More Read Less Button using HTML, CSS & JavaScript
We have Successfully created our Read More Read Less Button using HTML, CSS & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.
Read also:
Create A Travel/Tourism Website Using HTML and CSS
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Written By – Harsh Sawant
Code By – @harshh9
How to create Read More Read Less Button using HTML, CSS, JavaScript?
Step 1 – The HTML (Hypertext Markup Language) Code Will Help Us To structure the content UI, paragraph, button etc.
Step 2 – The CSS (Cascading Stylesheet) Code Will Help To Style The Project With Suitable Bgcolor And Some Alignment To The Necessary Elements, and button design.
Step 3 – Then The JS(JavaScript) Code, which would be help us to add fuctionality on button and the content box.
How do I add a read more button?
In Today’s Session, We Will Use HTML, CSS, And JavaScript To Complete This Project. We Will Go In Three Steps.
Step 1 – The HTML (Hypertext Markup Language) Code Will Help Us To structure the content UI, paragraph, button etc.
Step 2 – The CSS (Cascading Stylesheet) Code Will Help To Style The Project With Suitable Bgcolor And Some Alignment To The Necessary Elements, and button design.
Step 3 – Then The JS(JavaScript) Code, which would be help us to add fuctionality on button and the content box.
