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<button onclick="toggleText()">button</button>
2<p id="Myid">Text</p>
3<script>
4function toggleText(){
5 var x = document.getElementById("Myid");
6 if (x.style.display === "none") {
7 x.style.display = "block";
8 } else {
9 x.style.display = "none";
10 }
11}
12</script>
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
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
5<script>
6$(document).ready(function(){
7 $("#hide").click(function(){
8 $("#1").hide();
9 $("#2").show();
10 });
11 $("#show").click(function(){
12 $("#1").show();
13 $("#2").hide();
14 });
15});
16</script>
17</head>
18<body>
19
20<p id="1">Area 1</p>
21<p id="2" style="display: none;">Second area</p>
22
23<button id="show">Area 1</button>
24<button id="hide">Second Area</button>
25
26</body>
27</html>
28