Read more Read less using HTML,CSS,JS
Read more / Read less using HTML,CSS,JS.
Hello everyone so today we are sharing a small program for read more/read less effect
here we are using HTML+CSS+JS to apply the effect.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Read More</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="article">
something Text...
</div>
<center><button id="btn" onclick="read()">Read More</button>
</center>
</body>
<script src="script.js">
</script>
</html>
*{margin: auto 0;}
#article{
box-sizing: border-box;
background-color: #fff;
max-height: 200px;
overflow: hidden;
border:3px solid transparent;
padding: 20px;
}
#article.more{
overflow: visible;
background-color:#fff;
max-height: fit-content;
}
#btn{
background-color: blue;
padding: 20px;
font-size: 25px;
border-radius: 63px 63px 63px 63px;
border: 0px solid #000000;
}
#btn:hover{
opacity: 0.7;
}
function read(){
var check=document.getElementById("article");
var btn=document.getElementById("btn");
if(check.className ==''){
check.className='more';
btn.innerText="Read less";
}
else{
check.className='';
btn.innerText='Read More';
}
}
No comments: