Table Expand / Collapse

What i want is that the tables loads as collapsed instead of expanded

[spear]

I need your help.
I have this javascript and it work fine for me:

<SCRIPT LANGUAGE="JavaScript">

function Expand(node)
{
  // Change the image (if there is an image)
  if (node.children.length > 0)
  {
  if (node.children.item(0).tagName == "IMG")
  {
   node.children.item(0).src = "minus.gif";
  }
  }

  node.nextSibling.style.display = '';
}

function Collapse(node)
{
  // Change the image (if there is an image)
  if (node.children.length > 0)
  {
  if (node.children.item(0).tagName == "IMG")
  {
   node.children.item(0).src = "plus.gif";
  }
  }

  node.nextSibling.style.display = 'none';
}

function Toggle(node)
{
 // Unfold the branch if it isn't visible
 if (node.nextSibling.style.display == 'none')
 { 
  Expand(node);
 }
 // Collapse the branch if it IS visible
 else
 { 
  Collapse(node);
 }

}

function ExpandAll(num)
{
 var node;
 var count;
 for(var i = 1; i < num; i++)
 {
  count = "sub" + i;
  node = document.getElementById(count);
  if (node)
   if (node.nextSibling.style.display == 'none') Expand(node);
  count = "";  
 }
}

function CollapseAll(num)
{
 var node; 
 var count;
 for(var i = 1; i < num; i++)
 {
  count = "sub" + i;
  node = document.getElementById(count);
  if (node)
   if (node.nextSibling.style.display != 'none') Collapse(node);
  count = "";  
 } 
}
</SCRIPT>

What I want is that the tables loads as collapsed instead of expanded.
Please help me.
Thank you in advance !

[Fotiman]

Add something like:

window.onload = CollapseAll(?);

I'm not sure what the num value should be though without knowing what your markup looks like.

[spear]

Thank you for your help!
I have added it just after the script start:
<SCRIPT LANGUAGE="JavaScript">
window.onload = CollapseAll(?);
function Expand(node)
...

but it doesn't work.
The markup is:

<TABLE border=0>
<tr><td><table border=0>

<tr><td><TABLE border=0>
<TR><TD><A onClick="Toggle(this)" id="sub1" style="CURSOR: hand"><IMG SRC="minus.gif"> <u>Corporate Staff</u></a><DIV>
<TABLE border=0>
<tr>
<TD WIDTH=10></TD>
<td>User 1</td>
<td>User 1</td>
<td>User 1</td>
</tr>
<tr>
<TD WIDTH=10></TD>
<td>User 2</td>
<td>User 2</td>
<td>User 2</td>
</tr>
<tr>
<TD WIDTH=10></TD>
<td>User 3</td>
<td>User 3</td>
<td>User 3</td>
</tr>
</table>
</DIV></TD></TR>
</TABLE></TD></TR>

<tr><td><TABLE border=0>
<TR><TD><A onClick="Toggle(this)" id="sub2" style="CURSOR: hand"><IMG SRC="minus.gif"> <u>Group One</u></a><DIV>
<TABLE border=0>
<tr>
<TD WIDTH=10></TD>
<td>User 1</td>
<td>User 1</td>
<td>User 1</td>
</tr>
<tr>
<TD WIDTH=10></TD>
<td>User 2</td>
<td>User 2</td>
<td>User 2</td>
</tr>
</table>
</DIV></TD></TR>
</TABLE></TD></TR>

<tr><td><TABLE border=0>
<TR><TD><A onClick="Toggle(this)" id="sub3" style="CURSOR: hand"><IMG SRC="minus.gif"> <u>Group Two</u></a><DIV>
<TABLE border=0>
<tr>
<TD WIDTH=10></TD>
<td>User 1</td>
<td>User 1</td>
<td>User 1</td>
</tr>
</table>
</DIV></TD></TR>
</TABLE></TD></TR>

</TABLE>

</BODY>
</HTML>

but I need to work for unlimited "<TD><A onClick ....", because they are generated dynamically of the php code.
Is it possible all to be collapsed onload?

[Fotiman]

Do you have the ability to output the end "sub" value from the PHP code into a JavaScript variable? For example:

<script type="text/javascript">
window.onload = function () {
  var count = <?php echo $count; ?>;
  CollapseAll(count);
};
</script>

[spear]

Thank you for your help.
I just found the solution. I have added <div style="display:none"> just before the internal table and now all is collapsed onloading :)

[Fotiman]

But now users that have JavaScript disabled will not be able to view any of your content. That is not a good solution.

[spear]

True, but this is for private area with few users.
I have no idea how to make your example to work, because I am beginner in java scripting and php.