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 Button 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.
read more button HTML Code
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 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 type="rocketlazyloadscript" src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js” charset=“utf-8”></script>
<script type="rocketlazyloadscript" src=“https://kit.fontawesome.com/b99e675b6e.js”></script>
<!– javascript code–>
<!–
<script type="rocketlazyloadscript">
add javascript code
</script>
–>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
show more button CSS Code
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;
margin: 50px auto 0;
background: #fff;
padding: 30px 40px;
border-radius: 3px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
}
.wrapper .title{
font-weight: 700;
margin-bottom: 15px;
font-size: 18px;
text-align: center;
}
.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;
left: -12px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #bfbfbf;
}
.wrapper .toggle_btn{
margin-top: 15px;
font-weight: 700;
color: #ffffff;
cursor: pointer;
margin-left: 70%;
font-size: 15px;
padding: 10px;
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.
The “Read More” feature in HTML is used to display a shortened version of a long piece of content (such as an article or blog post) with the option to expand it and view the full content by clicking a button labeled “Read More”. This feature is often used to improve the user experience and reduce the amount of content displayed on a single page.
Here are the steps to create a “Read More” button in HTML:
- Define a container element to hold the text and button, such as a
<div>. - Inside the container, add the text you want to be initially visible and add a
<span>element with an id to reference later for the “Read More” functionality. - Add the “Read More” button as an
<a>element outside the text container. - Use JavaScript to toggle the visibility of the text inside the
<span>element when the button is clicked. You can use thedocument.getElementById()method to access the span and modify itsstyle.displayproperty to show or hide the text.
Here’s one way to add a “Read More” link in HTML without using JavaScript:
<p class="long-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
<a href="#" class="read-more">Read More</a>
</p>
<style>
.long-text {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
Here’s an example of how you can implement a “Read More” button using HTML, CSS, and JavaScript:
<p class="long-text">
Lorem Ipsum ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<button class="read-more-btn">Read More</button>
.long-text {
max-height: 60px;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.read-more-btn {
display: block;
margin: 10px 0;
}const longText = document.querySelector(".long-text");
const readMoreBtn = document.querySelector(".read-more-btn");
readMoreBtn.addEventListener("click", function() {
if (longText.style.maxHeight) {
longText.style.maxHeight = null;
readMoreBtn.innerHTML = "Read More";
} else {
longText.style.maxHeight = longText.scrollHeight + "px";
readMoreBtn.innerHTML = "Read Less";
}
});
Sweet blog! I found it while browsing on Yahoo News.
Do you have any tips on how to get listed in Yahoo News?
I’ve been trying for a while but I never seem to get there!
Many thanks