Create a Read More Read Less Button using HTML & CSS

Create a Read More Read Less Button HTML

Read More Read Less Button We see on almost all websites. This type of button is usually found on the homepage of the website. In this article, you will learn step by step how to create read more read less HTML. 

Here HTML, CSS, and jQuery are used to create Read More / Read Less Button. In the previous tutorial, I have shown you how to create a Responsive Footer Design

Many times I see some of the big information on the website and I see a button. When you click on that button, you will see the complete information.

Read More Read Less HTML

Below is a preview from which you can know how this read more read less button jquery works. A small amount of jQuery has been used here so you will not have difficulty in understanding.

See the Pen
Untitled
by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, a box has been created on the webpage. There is a lot of text added to that box. Some of those texts can be seen. 

There is a button (Read More Read Less Button). When you click on the button, all the text can be seen. You may use other information instead of this text.

How To Create Read More Read Less Button

No need to worry if you want to create this Read More Read Less Button. Here you will find all the source code and how to make read more button HTML

To create it you need to create an HTML CSS and javascript file. Here I have given all the source code.

HTML Code (inde.html):

The following code is the HTML code that I used to add all the information. Copy the following code and add it to your HTML file. Be sure to rename your HTML file using index.html.

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  <!– css cdn link –>
  <link rel=“stylesheet” href=“style.css”>
</head>
<body>
  <div class=“wrapper”>
      <div class=“title”>Show More & Show Less Button </div>
      <ul>
          <li>Lorem ipsum dolor sit amet.</li>
          <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae necessitatibus consequatur quae doloribus eaque quod cumque? Modi, impedit, deserunt pariatur accusantium commodi magnam eos, qui debitis officiis obcaecati ut voluptatum.</li>
          <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, ex?</li>
          <li>Lorem, ipsum.</li>
          <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
          <li>Lorem ipsum dolor sit.</li>
          <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, ex?</li>
          <li>Lorem, ipsum.</li>
      </ul>
      <div class=“toggle_btn”>
          <span class=“toggle_text”>Show More</span> <span class=“arrow”>
        <i class=“fas fa-angle-down”></i>
        </span>
      </div>
  </div>
<!–javascript cdn link–>
  <script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js” charset=“utf-8”></script>
  <script src=“https://kit.fontawesome.com/b99e675b6e.js”></script>
  <!– javascript code–>
  <!–
    <script>
      add javascript code
    </script>  
  –>
</body>
</html>

CSS Code (style.css): 

Now you have to use CSS to design this read more read less button. Below I have given all the CSS codes. You copy those codes and add them to your CSS file. 

Here I have CSS and javascript files linked to the HTML file. However, of course, use the rename style.css of your CSS file.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Montserrat’, sans-serif;
}
body{
background: #0c7788;
font-size: 14px;
line-height: 22px;
}
.wrapper{
width: 500px;
padding: 30px 40px;
border-radius: 3px;
margin: 50px auto 0;
background: #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
}
.wrapper .title{
font-size: 18px;
text-align: center;
font-weight: 700;
margin-bottom: 15px;
}
.wrapper  ul{
  height: 120px;
  overflow: hidden;
  padding-left: 15px;
}
.wrapper  ul.active{
height: auto;
}
.wrapper  ul li{
margin-bottom: 5px;
list-style: none;
position: relative;
}
.wrapper  ul li:before{
  content: “”;
  position: absolute;
  top: 8px;
  border-radius: 50%;
  background: #bfbfbf;
  left: -12px;
  width: 5px;
  height: 5px;
}
.wrapper .toggle_btn{
cursor: pointer;
margin-left: 70%;
font-size: 15px;
padding: 10px;
margin-top: 15px;
font-weight: 700;
color: #ffffff;
border-radius: 5px;
background: rgb(204, 12, 79);
}
.wrapper .toggle_btn.active .fas{
transform: rotate(180deg);
}

JavaScript (index.js): 

Now it’s time to activate this Simple Read Less and Read More Button using some amount of JQuery. 

To do this, create a JavaScript file and add the following code to your file. I have already added the jquery CDN link to the HTML code to activate this jquery.

  $(“.toggle_btn”).click(function(){
     $(this).toggleClass(“active”);
    $(“.wrapper ul”).toggleClass(“active”);
    if($(“.toggle_btn”).hasClass(“active”)){
      $(“.toggle_text”).text(“Show Less”);
    }
    else{
      $(“.toggle_text”).text(“Show More”);
    }
  });

Hopefully using the above code you have been able to create this Read Less and Read More Button. If there is any problem then use the download button below. 

All the source codes are attached together in that button. Please comment on how you like this read more button HTML.

1 thought on “Create a Read More Read Less Button using HTML & CSS”

Leave a Comment