Hi, I'm trying to create some kind of table tbody element collapsing, using JavaScript:

Code:
 <table id="filterForm">
 <thead>
  <tr><th colspan="2">Filter (<a href="#" onClick="JavaScript:document.getElementById('filterFrmBody').style.display='block';">Show</a> | <a href="#" onClick="JavaScript:document.getElementById('filterFrmBody').style.display='none';">Hide</a>)</th></tr>
 </thead>

 <tbody id="filterFrmBody">
  <tr><td>1</td><td>2</td></tr>
  <tr><td>3</td><td>4</td></tr>
  <tr><td>5</td><td>6</td></tr>
 </tbody>
</table>
I do this just because the Filter form is taking too much space (you see a smaller version of it, as the table row content does not matter so much here). This solution works on IE, however, there's a problem with FireFox (I'm using FF 0.8) - when you click hide and then show for the first time, everything goes smoothly. When you click hide for the second time - firefox forgets to collapse the space - and after clicking show again, it puts the tbody below the space it has forgot to collapse. With each of the next hide/show the space extends by the height of tbody.

As of other browsers I have - Konqueror works perfect on this, and galeon does not.

The question is whether this is some sort of firefox bug, or am I doing something illegal, according to XHTML/CSS/DOM ?

Maybe there are some other solutions to achieve this efect? I've tried the visibility style, but it just hides the tbody, and does not collapse the space.

Thanks in advance for any responses!