How to set asp Panel element visible/hidden with javascript/jquery

Question

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?

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
– eugene.it, Commented Mar 24, 2014 at 16:42
@eugene.it, just noticed that the panel has Visible=false. ASP.NET would not render it at all — Andrei
– Andrei, Commented Mar 24, 2014 at 16:46

Murali Murugesan · Accepted Answer · 2017-10-24 11:31:10Z

14

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()

edited Oct 24, 2017 at 11:31

answered Mar 24, 2014 at 16:41

Murali Murugesan

22.6k18 gold badges76 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix · Accepted Answer · 2014-03-24 16:40:02Z

2

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

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

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

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

answered Mar 24, 2014 at 16:40

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to set asp Panel element visible/hidden with javascript/jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related