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

Hide and Show Any Element

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

Introduction

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">
<table>
<tr><td>Street</td><td>123 sr</td></tr>
<tr><td>City</td><td>LA</td></tr>
<tr><td>State</td><td>CA</td></tr>
</table>
</DIV>

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> 

or:

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

or:

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

or:

<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(srcElement.style.display == "block") {
     		  srcElement.style.display= 'none';
   	    }
            else {
                   srcElement.style.display='block';
            }
            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>
')">Senthil</A>

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

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>
<tr><td>City</td><td>LA</td></tr>
<tr><td>State</td><td>CA</td></tr>
</table>
')">
  function show(targetElement,contentElement) {
      var tarElement = document.getElementById(targetElement);
      var srcElement = document.getElementById(contentElement);
      
      if(tarElement != null && srcElement  != null) {
       tarElement.innerHTML=srcElement.innerHTML;
      }
  }

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.

License

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

Share

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.

Comments and Discussions

 
SuggestionUse javascript:; instead of # Pinmemberjefferis26-Apr-12 8:41 
GeneralCODE ERROR in the above script! READ THIS Pinmemberusbserial18-Sep-08 16:20 
GeneralRe: CODE ERROR in the above script! READ THIS Pinmembersenthil karuppaiah21-Sep-08 6:35 
GeneralRe: CODE ERROR in the above script! READ THIS Pinmemberusbserial21-Sep-08 14:15 
GeneralNicely Explained Pinmembernaman28-May-08 2:06 
GeneralPlease help me.. Pinmemberkalyandama13-Mar-08 21:38 
GeneralThanks Pinmembersamad_sami13-Mar-07 23:21 
GeneralA few comments (or constructive criticism) PinmemberBjoern Graf19-Aug-06 14:44 
GeneralRe: A few comments (or constructive criticism) Pinmembersenthil karuppaiah19-Aug-06 16:07 
GeneralRe: A few comments (or constructive criticism) PinmemberBjoern Graf19-Aug-06 16:36 

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 | Terms of Use | Mobile
Web04 | 2.8.1411023.1 | Last Updated 21 Sep 2008
Article Copyright 2006 by senthil karuppaiah
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid