LinuxQuestions.org - interactive show/hide content

Hi All,

I was trying to code an interactive way to displaying images. Ive created a table with two rows. The first row contains the person’s name, and the second row contains their pics and some extra info.

The issue is, I do not want the second row to be displayed always. I want to create a javascript that would display the second row, only when the name is clicked. Ive tried using the visibility:hidden style for the 2nd row and it works but, the table has a yellow background and I'm unable to resize to the area of the first row... To be clear, I do not want the yellow background to appear in the area of the 2nd row, when it's hidden i.e. the name hasnt been clicked yet....

I was greatly appreciate any suggestions....

Thanks
raven

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>

<style type="text/css">
div.window{
position: absolute;
width: 640px;
height: 480px;
border: outset black 1px;
background-color: gray;
}

div.ShownMember {
background-color: yellow;
height: 1px;
}

div.hiddenMember {
background-color: yellow;
height: 20px;
}

#Infotext {
font-family: serif;
font-size: x-small;

}
</style>
</head>

<body>
<div class="window" style="position:absolute; left: 20px; top: 9px; z-index:0;">
<div class="ShownMember" style="position:absolute; left: 200px; top:50px; z-index:100;">
<table>
<tr> <td> <a ><center> <b>Name</b></center></a> </td> </tr>
<tr> <td>
<table id="extraInfo" cellpadding="0" cellspacing="0" width="100%" style="visibility: hidden;">
<tr> <td width="75px"> <img src="malik_small.jpg"> </td>
<td>Some Text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>

</body>
</html>