javascript to grow divs in table

[soni2926]

hi,
I have a table with <tr> rows which contains <div>, those divs
contains another table, that table contains product information.
Basically it looks like this:

<div style="visibility:hidden;">
<table>
<tr>
<td>Product Name</td>
<td>Price</td>
</tr>
</table>
</div>
This repeats depending on how many products are returned, is there
anyway to hide and display it without the space being there when it's
hidden? overall something like this:
<!-- 1st Order -->
<table>
<tr>
<td>abc</td>
<td>kdfk</td>
</table>
<div style="visibility:hidden;">
<table>
<tr>
<td>Product Name</td>
<td>Price</td>
</tr>
</table>
</div>
<div style="visibility:hidden;">
<table>
<tr>
<td>Product Name</td>
<td>Price</td>
</tr>
</table>
</div>
<!-- 2nd Order -->
<table>
<tr>
<td>abc</td>
<td>kdfk</td>
</table>

I have it so that the div areas hide and show when a link is clicked,
but when hidden there is a large gap inbetween the tables, anyway to
make it so that when it's hidden the gap is reduced and when show it's
grows to make room for it?

Thanks.