-   Programming (
-   -   interactive show/hide content (

0raven0 01-15-2006 08:00 PM

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....



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

<style type="text/css">
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;


<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;">
<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>


All times are GMT -5. The time now is 10:34 AM.