I have a asp:Panel element on my page. I'm able to set its visibility in code behind. But I need to also hide it through javascipt.

My panel is defined as following:

     <asp:Panel ID="pnlUpdateDisplay" runat="server" Visible="false" style="width:500px; border-width: thick;">
        <table style="width:300px;">
            <tr>
                <td valign="middle" style="width:120px" align="center">
                <asp:Label ID="lblUpdateMessage" runat="server" style="position:absolute; left: 120px; top: 120px;"></asp:Label>
                </td>
            </tr>
        </table>      
    </asp:Panel>

When I do this:

   var panel = document.getElementById('pnlUpdateDisplay');
   panel.style.visibility = 'hidden';
   panel.style.display='none';

There is an error saying: "Error: Unable to get value of the property 'style': object is null or undefined"

Any suggestions?

I have a asp:Panel element on my page. I'm able to set its visibility in code behind. But I need to also hide it through javascipt.

My panel is defined as following:

     <asp:Panel ID="pnlUpdateDisplay" runat="server" Visible="false" style="width:500px; border-width: thick;">
        <table style="width:300px;">
            <tr>
                <td valign="middle" style="width:120px" align="center">
                <asp:Label ID="lblUpdateMessage" runat="server" style="position:absolute; left: 120px; top: 120px;"></asp:Label>
                </td>
            </tr>
        </table>      
    </asp:Panel>

When I do this:

   var panel = document.getElementById('pnlUpdateDisplay');
   panel.style.visibility = 'hidden';
   panel.style.display='none';

There is an error saying: "Error: Unable to get value of the property 'style': object is null or undefined"

Any suggestions?

• javascript
• jquery
• asp.net
• panel

• Paste your generated html in your question – Turnip Commented Mar 24, 2014 at 16:39
• Actually, for some reason, there is not generated html for panel and other elements on a page but I'm able to see them on a page – eugene.it Commented Mar 24, 2014 at 16:42
• 1 @eugene.it, just noticed that the panel has Visible=false. ASP.NET would not render it at all – Andrei Commented Mar 24, 2014 at 16:46

2 Answers 2

Setting Visible=false to the server control in ascx/aspx mark up or in a code behind prevent the control being rendered in DOM. So you will not find them in DOM and it won't be accessible to JavaScript

Better remove Visible="false" set in the panel and add style display:none.

If you want to make it in code behind follow this code

pnlUpdateDisplay.Style.Add(HtmlTextWriterStyle.Display,"none");

Then use

$('#<%=pnlUpdateDisplay.ClientID %>').toggle()

You can use .toggle() to toggle between show and hide:

$('#pnlUpdateDisplay').toggle();

If you want to hide it only then use .hide()

$('#pnlUpdateDisplay').hide();