Saturday, August 26, 2017

Javascript : Show and hide div

In this article I am going to explain how to show and hide DIV using Javascript.

Description:
I want to hide and show the div on button click using Javascript.

Implementation:

Here is the example:

Complete HTML markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
               <script type="text/javascript">
                   function FunShowhide() {
                       var value = document.getElementById("btnhide").value;
                if (value == "Hide") {                  
                    document.getElementById("aspmantra").style.display = "none";
                    document.getElementById("btnhide").value = 'Show';
                }
                       else
                {
                    document.getElementById("aspmantra").style.display = "block";
                    document.getElementById("btnhide").value = 'Hide';
                }             
            }
            </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>   
        <input type="button" id="btnhide" onclick="FunShowhide()" value="Hide"> <br />   
        <div id="aspmantra">          
                   <a href="http://aspmantra.com"><img src="images/aspmantra.png" /></a>           
        </div>
    </div>
    
    </form>
</body>
</html>


DEMO:


how to show and hide DIV using Javascript


No comments:

Post a Comment