Table expand on click?!?!

W

weismana81

I have a few tables that I would like, I guess collapsed would be the best
word. Is there a way (maybe not even using tables) to have the top cell be
visible, then when user clicks, the cell below (holding most of the text)
becomes visable. Is this a flash thing maybe.

Anyway, any help is much appreciated.

Thanks,
Andy
 
M

MD Websunlimited

Hi Weisman,

To accoplish you'd have to utilize CSS and a little JS to set the display value of the elements.
 
M

Murray

Yes - that's how I would do it too.

Use the CSS style display:none, and display:inline and toggle between them.

But you'd need to have some js to do that.
 
C

clintonG

Here's something somebody posted recently...

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 30</title>

<script type="text/javascript">
function doTable(i){
if(!document.getElementById)return;
var d=document.getElementById(i), t=d.getElementsByTagName("TR");
for(x=0;x<t.length;x++)if(t[x].className=='expand')t[x].style.display=(t[x].
style.display=='none')?'block':'none';
}
</script>
</head>

<body onLoad="doTable('table1'); return false;">
<table border="1" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td><b>Heading</b> <a href="javascript:;" onclick="doTable('table1');
return false;">Expand/contract</a></td>
</tr>
<tr class="expand">
<td>Stuff</td>
</tr>
<tr class="expand">
<td>More Stuff</td>
</tr>
<tr class="expand">
<td>More Stuff</td>
</tr>
<tr class="expand">
<td>More Stuff</td>
</tr>
</table>
<table backgroundcolor="cccccc">
<tr><td>Content Here Gets Pushed Down</td>
</tr>
</table>
</body>

</html>
 
Top