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

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

  • August 27, 2014 at 7:29 pm
    Permalink

    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 ?

    Reply
  • August 28, 2014 at 4:03 am
    Permalink

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

    Reply
  • December 26, 2014 at 7:57 pm
    Permalink

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

    Reply
  • June 18, 2015 at 11:26 am
    Permalink

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

    Reply
    • June 18, 2015 at 12:00 pm
      Permalink

      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; }

      Reply

Leave a Reply

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

AlphaOmega Captcha Classica  –  Enter Security Code