Javascript OnClientClick Event to Show hide toggle display a DIV in Asp.Net C# VB.Net Application

In many cases developers need to show hide or toggle div container based on user requirement. Some of SEO specialists told that hiding a div is against SEO. But I want to tell that if your div appear with unchanged contents by user interaction then it’s ok for SEO. In many cases like you want to display a popup type window (which is basically a div) then you need to show or hide a div. Here in this javascript tutorial I will show you how one can manage show hide div based on user interaction.

There are two ways you can show hide a div:
1. By using CSS style.display property
2. By using CSS style.visibility property

1. By using CSS style.display property:
When you use style.display to control div appearance then in visible time it occupies its area but in hidden time it releases the area. Look at below image:
Javascript_onclientclick_show_hide_div_csharp_VB.Net

The Javascript Code:

<script type="text/javascript">
    function Show_Hide_By_Display() {
        var div1 = document.getElementById("div1");
        if (div1.style.display == "" || div1.style.display == "block") {
            div1.style.display = "none";

        }
        else {
            div1.style.display = "block";
        }
        return false;
    }    
</script>

Sample DIV HTML to show Hide:

    <div id="div1" style="border:2px;border-style:solid;border-color:Red;width:200px">
    This is a DIV. We will toggle based on a Button Click
    </div>
    
    <asp:Button ID="cmd" runat="server" Text="Click to toggle a DIV" OnClientClick="return Show_Hide_By_Display()" />

Note: Instead of Asp Button you can use Asp Linkbutton also.

2. By using CSS style.visibility property:
When you use style.visibility to control div appearance then in visible time it occupies its area as well as in hidden time also.

Javascript_onclientclick_show_hide_div_csharp_VB.Net_2

The Javascript Code:

    function Show_Hide_By_Visibility() {
        var div1 = document.getElementById("div1");
        if (div1.style.visibility == "") {
            div1.style.visibility = "hidden";

        }
        else {
            div1.style.visibility = "";
        }
        return false;
    } 

Sample DIV HTML to show Hide:

    <div id="div1" style="border:2px;border-style:solid;border-color:Red;width:200px">
    This is a DIV. We will toggle based on a Button Click
    </div>
    
    <%--<asp:Button ID="cmd" runat="server" Text="Click to toggle a DIV" OnClientClick="return Show_Hide_By_Display()" />--%>
    <asp:Button ID="cmd" runat="server" Text="Click to toggle a DIV" OnClientClick="return Show_Hide_By_Visibility()" />

Script tested for:
1. Internet Explorer
2. Mozilla Firefox
3. Opera
4. Google Chrome

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, Javascript, VB.Net
5 comments on “Javascript OnClientClick Event to Show hide toggle display a DIV in Asp.Net C# VB.Net Application
  1. PD says:

    I tried both options, but I get the following error “Unable to get value of the property ‘style’: object is null or undefined”. I suspect that the Page is not fully rendered yet for OnClientClick event to determine the DIV element by document.getElementById(“div1”). Can you please clarify how you were able to achieve this ?

  2. Shawpnendu Bikash says:

    Which browser you are using? Download my code example & try. If does not work let me know.

  3. Mohd Darwish says:

    It works like a charm. Great code! Thanks a lot.

  4. Greg says:

    Works just fine, one minor problem the button does not actually submit back to code behind.

    • Greg says:

      In fact found the problem you need ‘return true;’ or else it cancels out the postback, I am using this in a routine for Uploading a file so you also need visibility:hidden in the div style so that it is hidden on page load, shown on submit , hidden again on page load. function Show_Hide_By_Visibility() { var div1 = document.getElementById(“div1”); if (div1.style.visibility == “”) { div1.style.visibility = “hidden”; } else { div1.style.visibility = “”; } return true; }

Leave a Reply

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

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*