showing and hiding multiple divs using JavaScript dynamically

Question

Here I have four td s which are clickable and I have four more td s which have id s and concerned data within them. I want to display data when concerned clickable td s are clicked. This I want to do using JavaScript.

Here is my JavaScript code:

var _hidediv = null;
function showdiv(id) {
    var div = document.getElementById(id);
    div.style.display = 'block';
    if(_hidediv)
        _hidediv();
    _hidediv = function () {
         div.style.display = 'none';
    };

Answer 1

Is this that you need?

http://jsfiddle.net/f8VL8/11/

var showed = 'news1';

function showdiv(id) {
    if(showed && showed !== id) {
        document.getElementById(showed).style.display = 'none';
    } 
    document.getElementById(id).style.display = 'block';
    showed = id;
}
​

Answer 2

rewrite in jquery version

http://jsfiddle.net/f8VL8/13/

js

$('.content').click(function(){
    var target = $(this).attr('href');
    //console.log(target);
    if(target){
        $('.result td').hide();
        $(target).show();
    }
});

HTML

<tr >
      <td><a href="#news1" class="content" >iCMS</a></td>
 </tr>
 <tr>
       <td><a href="#news2" class="content" >SMSC</a></td>
 </tr>
 <tr>
       <td><a href="#news3" class="content">SMS Gateway</a></td>
 </tr>
 <tr>
      <td><a href="#news4" class="content">WAP Gateway</a></td>
 </tr>

Answer 3

On left side in JSfiddle, change onLoad to no wrap (head) and your script will work.

http://jsfiddle.net/f8VL8/14/