1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6#myDIV {
7 width: 100%;
8 padding: 50px 0;
9 text-align: center;
10 background-color: lightblue;
11 margin-top: 20px;
12}
13</style>
14</head>
15<body>
16
17<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
18
19<button onclick="myFunction()">Try it</button>
20
21<div id="myDIV">
22This is my DIV element.
23</div>
24
25<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
26
27<script>
28function myFunction() {
29 var x = document.getElementById("myDIV");
30 if (x.style.display === "none") {
31 x.style.display = "block";
32 } else {
33 x.style.display = "none";
34 }
35}
36</script>
37
38</body>
39</html>
40