Hide and Show div using Javascript

Show/Hide div on button click using Javascript

Hello friends in this article we will learn how to hide and show element on click using JavaScript. Example Below

<div id="Demodiv">
   This is my DIV element.
</div>

<br />
<button class="b1" onclick="myFunction()">Hide Div</button>
<button class="b2" onclick="myFunction1()">Show Div</button>
function myFunction() {
        var x = document.getElementById("Demodiv");
         {
            x.style.display = "none";
         }
    }

    function myFunction1() {
        var x = document.getElementById("Demodiv");
        {
            x.style.display = "block";
        }
    }
</script>

Toggle Hide and Show

 <div id="Demodiv">
   This is my DIV element.
</div>
<br />
<button class="b1" onclick="myFunction()">Toggle Hide/Show</button>
<script type="text/javascript">
    function myFunction() {
        var xyz = document.getElementById("Demodiv");
        if (xyz.style.display === "none") {
            xyz.style.display = "block";
        } else {
            xyz.style.display = "none";
        }
    }

</script>

Leave a Reply

Your email address will not be published. Required fields are marked *