Read More Read Less Button
1111122222
33333
44444
55555
77777
88888
99999
.
........
<html>
<head>
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>
Read More Read Less Button</h2>
11111<br />
22222<br />
33333<br />
44444<br />
55555<br />
<div></div><span id="dots"></span><span id="more">66666<br />
77777<br />
88888<br />
99999<br />.</span><br />
<button id="myBtn" onclick="myFunction()">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>
Comments