Menu
I have the code below that gives the ability to open and collapse sections. I don’t know too much javascript and found this code online. I tweaked it to serve my purposes but it doesn’t do one thing. I would like all of the areas to be collapsed when the page is opened. How would I tweak the code below to do that?
[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>Untitled Page</title>
<script type=”text/javascript”>
function ExpandCollapseTable1(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display==”block” || titleRow.parentNode.childNodes[1].style.display==””)
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = “none”;
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = “block”;
}
}
}
}
function ExpandCollapseTable2(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display==”block” || titleRow.parentNode.childNodes[1].style.display==””)
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = “none”;
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = “block”;
}
}
}
}
function ExpandCollapseTable3(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display==”block” || titleRow.parentNode.childNodes[1].style.display==””)
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = “none”;
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = “block”;
}
}
}
}
function ExpandCollapseTable4(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display==”block” || titleRow.parentNode.childNodes[1].style.display==””)
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = “none”;
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = “block”;
}
}
}
}
</script>
</head>
<body>
<table border=’0′ bordercolor=’#000000′ width=’100%’ cellspacing=’0′ cellpadding=’0′ bgcolor=red>
<tr onclick=”ExpandCollapseTable1(this);” style=’cursor:pointer;’>
<td> I</td>
</tr>
<tr>
<td><table border=’0′ bordercolor=’#000000′ width=’100%’ cellspacing=’0′ cellpadding=’0′ bgcolor=lightgreen>
<tr onclick=”ExpandCollapseTable2(this);” style=’cursor:pointer;’>
<td> A</td>
</tr>
<tr>
<td><table border=’0′ bordercolor=’#000000′ width=’100%’ cellspacing=’0′ cellpadding=’0′ bgcolor=yellow>
<tr onclick=”ExpandCollapseTable3(this);” style=’cursor:pointer;’>
<td> i</td>
</tr>
<tr>
<td><table border=’0′ bordercolor=’#000000′ width=’100%’ cellspacing=’0′ cellpadding=’0′ bgcolor=lightblue>
<tr onclick=”ExpandCollapseTable4(this);” style=’cursor:pointer;’>
<td> a</td>
</tr>
<tr>
<td bgcolor=orange> CONTENT CONTENT CONTENT</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
FYI, I’ve also posted this question at:
[url]http://www.tek-tips.com/submitpost.cfm?pid=216
[url]http://codingforums.com/showthread.php?p=980260