Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / ASP.NET

Show/hide elements dynamically in web page

4.60/5 (7 votes)
6 Feb 2012CPOL 138.9K  
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


ASP.NET
<div id="Div1"  runat="server">

Server-side(ASP.NET/C#)
C#
//To show
Div1.Visible = true;
//To hide
Div1.Visible = false;

Client-side - JavaScript

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

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

Client-side - jQuery
JavaScript
//To show
$('#<%=Div1.ClientID%>').show();
//To hide
$('#<%=Div1.ClientID%>').hide();

Further Reading


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)