ZilaStar ICT
Jul 10 2022, 18:10:53
Category : JavaScript Tutorials
Creating Readmore Button
<!DOCTYPE html>
<html>
<head>
<titile>Code Testing For Read More Function</titile>
<style>
#more{
display: none;
}
</style>
</head>
<body>
<p>
I am Thet Naing Win. I am 35 years old man. Now I stay in Yangon. I have achieved the BCSc degree and SCN. <span id="dots">.....</span><span id="more">I have passed the matriculation exam in 2003 and I went to Computer University in December 2003.I have finished my studies in Computer University in Sep 2006. I have achieved the BCSc degree in Feb 2007. Since then, i have been supporting the IT services to the customers for their business.</span>
<button id="myBtn" onclick="myFunction()">Read More</button>
</p>
<p>
I am Thet Naing Win. I am 35 years old man. Now I stay in Yangon. I have achieved the BCSc degree and SCN. <span id="dots">.....</span><span id="more">I have passed the matriculation exam in 2003 and I went to Computer University in December 2003.I have finished my studies in Computer University in Sep 2006. I have achieved the BCSc degree in Feb 2007. Since then, i have been supporting the IT services to the customers for their business.</span>
<button id="myBtn" onclick="myFunction()">Read More</button>
</p>
<script>
function myFunction(){
var dots = document.getElementById("dots");
var more = document.getElementById("more");
var btn = document.getElementById("myBtn");
if(dots.style.display === "none"){
dots.style.display = "inline";
more.style.display = "none";
btn.innerHTML = "Read More";
}else{
dots.style.display = "none";
more.style.display = "inline";
btn.innerHTML = "Read less";
}
}
</script>
</body>
</html>
Comments:
No comment to show.