<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript hide show div</title>
</head>
<style>
body {
text-align: center;
margin-top: 100px;
background: blueviolet;
}
button {
background: red;
padding: 10px 50px;
border: none;
color: #ffffff;
font-size: 20px;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
#content {
background: #ffddee;
padding: 100px;
margin: 20px auto;
font-size: 20px;
width: 200px;
font-weight: bold;
font-family: sans-serif;
border-radius: 4px;
}
</style>
<body>
<button id="toggle">Hide</button>
<div id="content">Content</div>
</body>
<script>
let isShow = true;
const button = document.getElementById("toggle");
const content = document.getElementById("content");
button.addEventListener("click", () => {
isShow = !isShow;
if (isShow) {
content.style.display = "block"
button.textContent = "Hide"
} else {
content.style.display = "none"
button.textContent = "Show"
}
})
</script>
</html>
0 Comments
If you have any question please ask?