1// javascript
2<script>
3 document.getElementById("id").style.display = "none"; //hide
4 document.getElementById("id").style.display = "block"; //show
5 document.getElementById("id").style.display = ""; //show
6</script>
7
8// html
9<html>
10 <div id="id" style="display:none">
11 <div id="id" style="display:block">
12</html>
13
14// jquery
15<script>
16 $("#id").hide();
17 $("#id").show();
18</script>
19
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
1//If you have jquery, you can use the following method:
2$("#mydiv").hide(); //hides div.
3$("#mydiv").show(); //shows div.
4//If you don't have jquery...
5//search up the following: html how to add jquery