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();

License

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

About the Author

thatraja

Web Developer

India

Member

Follow on Twitter
Google+

Google

Programmer | CodeProject MVP, Mentor | Author | Geek | Blogger | Bachelor | Dude

About him & his blog? check out here.

In Codeproject, he posted a blogpost & more than couple of Tip/Tricks, hope he'll write more soon. And he got a place in CCC table.

In programming, he wants to go with new things like HTML5, CSS3, WP7, Silverlight, WPF, WCF, etc.,

His hobbies are watching movies, Codeproject, being alone, etc.,

Article Top