Question

I have a label and a div called “menu” that is currently invisible. I want that when the user clicks the label. It will make the div visible. I thought of doing it through javascript, how do I make a control visible through javascript?

Answer 1

First, if you want to access controls on the client-side, they must be rendered as html. When you use Control.Visible it won’t be rendered on the client and is only accessible on the serverside. Therefore you have to use CSS to toggle it’s visibility on the clientside.

show the div:

document.getElementById('menu').style.display = 'inherit';

You could hide it with:

document.getElementById('menu').style.display = 'none';

You should keep in mind that the id of serverside-controls could change when it’s inside of an other NamingContainer than the page(f.e. in a GridView or UserControl). So you should use Control.ClientID to get the correct ID that’ll be generated from ASP.Net:

So this is better:

document.getElementById('<%= menu.ClientID %>').style.display = 'none';

In ASP.Net 4.0 it’s possible to customize the ClientID. For further informations:

• http://www.thereforesystems.com/working-with-client-id-in-asp-net-4/
• http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx