Javascript : Show and hide div - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

Javascript : Show and hide div

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

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


Here is the example:

Complete HTML markup:

<html xmlns="">
<head runat="server">
               <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';
                    document.getElementById("aspmantra").style.display = "block";
                    document.getElementById("btnhide").value = 'Hide';
    <form id="form1" runat="server">
        <input type="button" id="btnhide" onclick="FunShowhide()" value="Hide"> <br />   
        <div id="aspmantra">          
                   <a href=""><img src="images/aspmantra.png" /></a>           


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.