<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<br>
<style>
#tables .tableMainSub {color: #517191; font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 18px; font-weight: normal; background: #D3DCEE; text-indent: 10px; vertical-align: middle; height: 20px; border: 1px solid #9FB9D6; cursor: hand; width:100%;}
#tables .tableCellLeft {vertical-align:top; border: #9FB9D6 solid 1px; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 11px; font-weight: normal; padding:5px; }
</style>
</head><body onLoad="initPanels();">
<span style=
"float:right; margin-bottom:3px; color:#999" class=
"sz10"><a href=
"javascript:void(0);" onClick=
"">Expand all</a> | <a href=
"javascript:void(0);" onClick=
"">Collapse all<
/a></span>
<!--Start Accordion-->
<div id="tables">
<table id="paneltable" border="0" cellpadding="1" cellspacing="1" width="100%">
<tr valign="top">
<td
class=
"tableMainSub" onClick=
"ToggleRowVisibility('paneltable',1);"><img src=
"http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif" name=
"paneltable.1" border=
"0" > Header
1</td>
</tr>
<tr valign="top">
<td class="tableCellLeft"><!--Start Accordion Content-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<!--End Accordion Content-->
</td>
</tr>
<tr valign="top">
<td
class=
"tableMainSub" onClick=
"ToggleRowVisibility('paneltable',3);"><img src=
"http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif" name=
"paneltable.3" border=
"0" > Header
2</td>
</tr>
<tr valign="top">
<td class="tableCellLeft"><!--Start Accordion Content-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<!--End Accordion Content-->
</td>
</tr>
<tr valign="top">
<td
class=
"tableMainSub" onClick=
"ToggleRowVisibility('paneltable',5);"><img src=
"http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif" name=
"paneltable.5" border=
"0" > Header
3</td>
</tr>
<tr valign="top">
<td class="tableCellLeft"><!--Start Accordion Content-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<!--End Accordion Content-->
</td>
</tr>
</table>
<!--End Accordion-->
</div>
<script>
<!--
function initPanels()
{
// Pre-collapse some panels, as an example (assumes all panels initially visible)
ToggleRowVisibility("paneltable",1);
ToggleRowVisibility("paneltable",3);
ToggleRowVisibility("paneltable",5);
}
imgExpand = new Image();
imgCollapse = new Image();
imgExpand.src = "http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/c.gif";
imgCollapse.src = "http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif";
</script>
<script>
// Panel Functions
/////////////////////////////////////////////////////////////////////////////////////////////////////
function ChangeRowVisibility(tableName, strVisibility, intRowIndex)
{
if(strVisibility == "visible")
{
document.getElementById(tableName).rows[intRowIndex].style.display = "block";
}
else if(strVisibility == "collapse")
{
document.getElementById(tableName).rows[intRowIndex].style.display = "none";
}
}
function ToggleRowVisibility(tableName, intRowIndex)
{
var currentSetting = document.getElementById(tableName).rows[intRowIndex].style.display;
if (currentSetting=="none")
{
ChangeRowVisibility(tableName,"visible", intRowIndex);
document.images[tableName+"."+intRowIndex].src=imgCollapse.src;
}
else
{
ChangeRowVisibility(tableName,"collapse", intRowIndex);
document.images[tableName+"."+intRowIndex].src=imgExpand.src;
}
}
</script>
</body>
</html>
Unsolved 
