Javascript : Show and hide div - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon