This code demostate How to hide and show DIV contrnt in a post using a button
Click the "Try it" button to toggle between hiding and showing the DIV element:
This is my DIV1 element.
This is my DIV2 element.
Note: The element will not take up any space when the display property set to "none".
Preview the code :
<meta content="width=device-width, initial-scale=1" name="viewport"></meta> <style> #myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } #myDIV2 { width: 100%; padding: 50px 0; text-align: center; background-color: green; margin-top: 20px; } </style> <body> <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p> <button onclick="myFunction()">Try it</button><button onclick="myFunction2()">Try it</button> <div id="myDIV"> This is my DIV1 element. </div> <div id="myDIV2"> This is my DIV2 element. </div> <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> <script> function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> <script> function myFunction2() { var x = document.getElementById("myDIV2"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script></body>
Posts
