Hide and Show Any Element

• Download demo and source code - 1.21 KB

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>
')"></DIV>

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

<DIV id="PersonalInfo2" 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>

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.