Make Panel visible using javascript

Question

I have a Panel with property, Visible set to False

<asp:Panel ID="pnlUpload" runat="server" Visible="False" />

and i try to make it visible using javascript as code below

document.getElementById('<%= Panel1.ClientID %>').style.visibility = 'visible';

but it's not working, any idea guys?

Answer 1

Setting Visible="false" makes the panel not to render in the generated HTML. If you want to make it show/hide in the client side, you need to make it Visible="true" and use a CSS class/in the style attribute having "display" property with the value "block" or "none" as required.

Answer 2

I am answering this with zero ASP experience but a lot of JS/HTML/CSS experience so bear with me if I am completely wrong...

I would say that the Visible="False" tag is not equivalent to the CSS style="visibility:hidden;" therefore that JS call will have no effect.

Answer 3

In order to display asp controls you need to use the property

ClientVisible

Example:

<asp:Panel ID="someId" runat="server" ClientInstanceName="someIdClient" ClientVisible="False" />

As mentioned in a previous post the attribute

Visible="False"

leads to not rendering the control.

In order to access the hidden control via Javascript you simply type:

function myFunction(){ someIdClient.SetVisible(true) 

Answer 4

I tried .style.visibility = 'visible' and visible="true" and .style.display = 'block' and .style.display = 'inline' all those thing does not work. but if you write .style.display = 'none' it work. any body know the solution Please let me know Thanks

Answer 5

I answering with almost zero ASP experience, like Flash84x :-)

It seems that in asp, when you set "Visibile=false", the panel is not created.

And if you would like to use custom JavaScript and not the .NET facility to display, hide a panel you should apply a style directly in the tag like this:

<asp:Panel id="pnlUpload" runat="server"
  Style="visibility:hidden;background-color:#CC9999; 

color:#FFFFFF; width:200; height:200; border:solid 1; padding:10"> .....

And then it will rendere somthing like this in html :

<div id="pnlUpload" class="text" style="visibility:hidden;

background-color:#CC9999; color:#FFFFFF; width:200; height:200; border:solid 1; padding:10"> .....

</div>

And of course the corresponding javascript would be:

<script language="JavaScript">
document.getElementById('pnlUpload').style.visibility = 'visible';
</script>

Answer 6

Please put your panel in a div and change the style using the following way

<div>
<asp:Panel ID="pnlUpload" runat="server" Visible="False" />
</div>

javascript

function visible()
{
document.getElementById('<%=pnlUpload.ClientID %>').style.display = 'block'
}

Answer 7

don't use visibility use this..

 document.getElementById("<%=myPanel.ClientID%>").style.display = "none"; //not visible document.getElementById("<%=myPanel.ClientID%>").style.display = "inline"; //visible