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' Toggles hide / show
2function myFunction(div_id) {
3 var x = document.getElementById(div_id);
4 if (x.style.display === "none") {
5 x.style.display = "block";
6 } else {
7 x.style.display = "none";
8 }
9}
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