Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to hide and show a element with if else condition .

How to Hide and show a element with if else condition .

in this program , when we click the button it will check the 'myDiv' is hidden or not . If it is hidden it will change the css property so that the element will show . other wise it will be hide .
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
    #myDiv{
        width:300px;
        height:200px;
        background:Red;
           }
        </style>
</head>
<body>
    <div id="myDiv">

    </div>
    <button onclick="myFunction()">Click</button><!-- When user clicks on the this Button it will call myFunction-->
    <script>
        var mybox = document.getElementById('myDiv');
        function myFunction() {
            if (mybox.style.display == 'none') {
                mybox.style.display = 'block';
            }
            else {
               
                mybox.style.display = 'none';
               
            }
           
        }
    </script>
</body>
</html>


This post first appeared on WEB Developement, please read the originial post: here

Share the post

How to hide and show a element with if else condition .

×

Subscribe to Web Developement

Get updates delivered right to your inbox!

Thank you for your subscription

×