collapse / expand part of a table

[ksbigfoot]

I have the following code:

<script type="text/javascript">
function handleClick(Obj,imagen)  {
    if(document.getElementById(Obj).style.display=='none') {
        document.getElementById(Obj).style.display = "";
        document.getElementById(imagen).src="images/minus.gif";
        
    }
      else {
          document.getElementById(Obj).style.display = "none";
          document.getElementById(imagen).src="images/plus.gif";
          
      }
}
</script>
<img src="images/minus.gif" id="gif1" onclick="handleClick('to_col1','gif1')" align="left">
<div id="to_col1">
<table border="1">
<tr>
  <td>Col 1</td>
  <td>Col 2</td>
</tr>
<tr>
  <td>One</td>
  <td>Two</td>
</tr>
<tr>
  <td>Three</td>
  <td>Four</td>
</tr>
</table>
</div>

and I want the heading (Col1 & Col2) to stay, but hide all the rows beneath it (One, Two, Three, Four)
Is that possible?
Or do I have to hide the whole table

 

[cLFlaVA]

you should bring this question to the javascript forum (forum216).



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ksbigfoot]

Thanks cLFlaVA,
Makes sense, I will do that.