Click here to Skip to main content
13,093,184 members (67,653 online)
Click here to Skip to main content
Add your own
alternative version


22 bookmarked
Posted 19 Aug 2006

Hide and Show Any Element

, 21 Sep 2008
Rate this:
Please Sign up or sign in to vote.
Hide and show any element based on some event


If you want to hide and show an element or DIV or SPAN that contains relevant information for a particular item, e.g., when the user clicks on a particular link, you may want to show some details.

It is easy to do this using JavaScript.

If you want to display personal information for each person in the list (it may be a <A> or RADIO or SELECT element), when you generate the HTML, render the personal information section within a SPAN or DIV tag which is hidden by default. If you use SPAN, then make sure whether you want to display the following text on the same line or on the next line.  

<DIV ID="PersonalInfo1" style="display:none">
<tr><td>Street</td><td>123 sr</td></tr>

Now you need to connect this DIV with the actual person. It may be <A> tag or some button or radio button or select tag.

<A href="#" onclick="show('PersonalInfo1')">Senthil</A> 


<input type="radio" value="senthil" onclick="show('PersonalInfo1')">senthil


<SELECT name="select1" onchange="show(this.value)">
<option value=""></option>
<option value="PersonalInfo1">senthil</option>


<input type="button" onclick="show('PersonalInfo1')" value="personalInfo">

By default, SPAN is an inline tag meaning it will just follow the flow and shift the position based on left and top properties. In that case, you need to use 'inline' to make it display or set display = ''. If you use DIV, you should use display = "block";

function show(ele) {
       var srcElement = document.getElementById(ele);
       if(srcElement != null) {
     if( == "block") {
          else {
          return false;

When you click on the hyperlink, the browser will show the table. If you click again, the browser will hide it.

Another way is that you can have a common detail area. Then when the user clicks a link or button or selects an item from the drop down, you can display details in  the target.

<DIV ID= "PersonalInfo"></DIV>

<A href="#" onclick="show('PersonalInfo1','
<table><tr><td>Street</td><td>123 sr</td></tr></table>

<A href="#" onclick="show('PersonalInfo','
<table><tr><td>Street</td><td>123 sr</td></tr></table>
function show(ele,content) {
    var srcElement = document.getElementById(ele);
    if(srcElement != null) {

The above code will replace the inner HTML of the DIV with the new TABLE or:

<DIV ID= "PersonalInfo"></DIV>

<A href="#" onclick="show('PersonalInfo','PersonalInfo1')">senthil</A>

<DIV id="PersonalInfo1" style="display:none"><table>
<tr><td>Street</td><td>123 sr</td></tr>

<A href="#" onclick="show('PersonalInfo','PersonalInfo2')">Raj</A>

<DIV id="PersonalInfo2" style="display:none">
<table><tr><td>Street</td><td>123 sr</td></tr>
function show(targetElement,contentElement) {
    var tarElement = document.getElementById(targetElement);
    var srcElement = document.getElementById(contentElement);

    if(tarElement != null && srcElement  != null) {

In the above code, we define different DIVs for each personal information and connect them with the link by sending the correct DIV ID for the second argument.


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


About the Author

senthil karuppaiah
Web Developer
United States United States
Fourteen years of progressive experience in Software Product Development, tactical planning, project and client management, demonstrated success in leadership, critical thinking, problem solving and analysis. Diverse knowledge and experience with multiple development methodologies, reengineering, software engineering, and integration of heterogeneous systems.

You may also be interested in...

Comments and Discussions

SuggestionUse javascript:; instead of # Pin
jefferis26-Apr-12 7:41
memberjefferis26-Apr-12 7:41 
GeneralCODE ERROR in the above script! READ THIS Pin
usbserial18-Sep-08 15:20
memberusbserial18-Sep-08 15:20 
GeneralRe: CODE ERROR in the above script! READ THIS Pin
senthil karuppaiah21-Sep-08 5:35
membersenthil karuppaiah21-Sep-08 5:35 
GeneralRe: CODE ERROR in the above script! READ THIS Pin
usbserial21-Sep-08 13:15
memberusbserial21-Sep-08 13:15 
GeneralNicely Explained Pin
naman28-May-08 1:06
membernaman28-May-08 1:06 
GeneralPlease help me.. Pin
kalyandama13-Mar-08 20:38
memberkalyandama13-Mar-08 20:38 
GeneralThanks Pin
samad_sami13-Mar-07 22:21
membersamad_sami13-Mar-07 22:21 
GeneralA few comments (or constructive criticism) Pin
Bjoern Graf19-Aug-06 13:44
memberBjoern Graf19-Aug-06 13:44 
GeneralRe: A few comments (or constructive criticism) Pin
senthil karuppaiah19-Aug-06 15:07
membersenthil karuppaiah19-Aug-06 15:07 
GeneralRe: A few comments (or constructive criticism) Pin
Bjoern Graf19-Aug-06 15:36
memberBjoern Graf19-Aug-06 15:36 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170813.1 | Last Updated 21 Sep 2008
Article Copyright 2006 by senthil karuppaiah
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid