Show/hide elements dynamically in web page

Description

How to Show/hide elements dynamically in web page via Server-side/client-side. Let's take a DIV for example:

Code

<div id="Div1"  runat="server">

Server-side(ASP.NET/C#)

//To show
Div1.Visible = true;
//To hide
Div1.Visible = false;

Client-side - JavaScript

Using Visibility property

div = document.getElementById('<%=Div1.ClientID%>')
//To show
div.style.visibility="visible";
//To hide
div.style.visibility="hidden";

Using display property:

div = document.getElementById('<%=Div1.ClientID%>')
//To show
div.style.display="block";
//To hide
div.style.display="none";

Client-side - jQuery

//To show
$('#<%=Div1.ClientID%>').show();
//To hide
$('#<%=Div1.ClientID%>').hide();

Further Reading

• http://www.w3schools.com/aspnet/prop_control_standard_visible.asp[^]
• http://www.w3schools.com/cssref/pr_class_visibility.asp[^]
• http://www.w3schools.com/cssref/pr_class_display.asp[^]
• http://api.jquery.com/show/[^]
• http://api.jquery.com/hide/[^]
• How-to use ClientIDs in JavaScript without the ugliness[^]