Click here to Skip to main content
Click here to Skip to main content

Show/hide elements dynamically in web page

By , 6 Feb 2012
Rate this:
Please Sign up or sign in to vote.

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

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 India
Programmer | CodeProject MVP, Mentor | Author | Geek | Blogger | Bachelor | Dude
 
About him & his blog? check out here. Currently he's updating the site, he'll return soon there with more things*.
 
In Codeproject, he posted a blogpost & more than couple of Tip/Tricks, hope he'll write more soon.
 
Favorite techs are MVC, WCF, Mobile, HTML5, CSS3, jQuery, etc.,
 
His hobbies are watching movies, CP, being alone, etc., But now he's working on something*.
 
* - SCAMP???
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionClient side without reload the page? PinmemberIgor Maozao9-Feb-13 3:34 
GeneralHow about ClientID for server div? Maybe you miss something?... PinmemberAnton Levshunov6-Feb-12 10:26 
GeneralRe: Yep, I forgot to include the ClientIDs. Now I have updated t... Pinmvpthatraja6-Feb-12 19:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 7 Feb 2012
Article Copyright 2012 by thatraja
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid