65.9K
CodeProject is changing. Read more.
Home

Show/hide elements dynamically in web page

thatraja
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.60/5 (7 votes)

Feb 5, 2012

CPOL
viewsIcon

138956

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