You are currently viewing Read More/Read Less Button using HTML, CSS & JavaScript

Read More/Read Less Button using HTML, CSS & JavaScript

Read More/Read Less Button using HTML, CSS & JavaScript

Nowadays everyone try to include simplicity while creating a content so that it doesn’t become lengthy and user who is surfing doesn’t get bore 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  Read More/Read Less .

Hello Coders!! In This Article We Will Be Creating A Simple Project We Will Create A Read More/Read Less Button.  This Article We Will Be For Beginner And By The End Of The Article You Will Be Creating Your Read More/Read Less Button using HTML, CSS and JavaScript.

I hope you have got an idea about this project.

HTML Code for Read More/Read Less Button

<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>

In this HTML Code we have created the structure in which we have added 2 paragraphs to make it little lengthy but we have also created a show more label in which if the user is willing to read further simply he can click and go through it. Let us style the project using CSS.

50+ Html ,Css & Javascript Projects With Source Code

CSS Code for Read More/Read Less Button

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

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 us code the JavaScript part to make this project responsive.

JavaScript Code for Read More/Read Less Button

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

};

Basically in this simple JavaScript code we have given a name to the content and the show more button. Let we have added a function which will make it responsive. Atlast we have added a if statement in which once it satisfies the condition it will expand the box and change the name from more to less. Let us see the final output of the project.

10+ Javascript Projects For Beginners With Source Code

Final Output Read More/Read Less Button using HTML, CSS & JavaScript

See the Pen
Show More/Show Less Button using HTML5, CSS3 & JS
by Harsh Sawant (@harshh9)
on CodePen.

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.

Create Simple Portfolio Website Using Html Css (Portfolio Website Source Code)

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

Leave a Reply