JavaScript Forum

**rfresh** · 04:52 PM

I have a 4 row table within a div. I'm trying to "roll up" the table so that only the first row is displayed when I click on a JS link. My JS event sets the div style.height to 170px which is about one row high. But the problem is that the table still shows 4 rows. So, I'm wondering if tables can be used within a div?

I have used this method successfully to resize a div section but it did not contain a table.

Thanks for any help...

**simster** · 03-16-2009, 04:55 PM

you could set the height to 1ex (height of X) and/or put overflow:hidden in the css

**rfresh** · 03-16-2009, 06:03 PM

That did work but part of the top of the table is still visible.

I tried setting 1ex to 0ex but 0ex didn't hide the table at all. 1px hides almost all of the table but 0px doesn't hide any of it either.

PHP Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript">
<!-- Hide javascript code
function expand_collapse_section()
{
  document.getElementById("id_expand_collapse_section_container").style.height = "1ex";
  return;
}
// stop hiding javascript -->
</script>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
<FORM>
<A HREF="javascript:expand_collapse_section()">collapse</A>
<div id="id_expand_collapse_section_container" style="overflow: hidden;">
<TABLE border=1>
<TR>
<TD>
aaaa
</TD>
</TR>
<TR>
<TD>
bbbb
</TD>
</TR>
</TABLE>
</div>
</HTML>

**chrishirst** · 03-16-2009, 08:39 PM

Give the rows you want to hide an ID, then set a classname on those rows with a display:none rule when you want to hide them. The div will then collapse at the same time.