Show/hide elements dynamically in web page
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 aDIV
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[^]