this code was recently posted by tcadieux, easily modified, if not say and will help
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
// Row Hide function.
// by tcadieux
function expandcontract(tbodyid,ClickIcon) {
if (document.getElementById(ClickIcon).innerHTML == "+"){
document.getElementById(tbodyid).style.display = "";
document.getElementById(ClickIcon).innerHTML = "-";
} else {
document.getElementById(tbodyid).style.display = "none";
document.getElementById(ClickIcon).innerHTML = "+";
}}
</SCRIPT>
<table border=1 cellpadding=4 CELLSPACING=0>
<tr>
<td onclick="expandcontract('Row1','ClickIcon1')" id="ClickIcon1" style="cursor: pointer; cursor: hand;">+</td>
<td>ROW 1 - HEADER</td>
</tr>
<tbody id="Row1" style="display:none">
<tr><td colspan="2">ROW 1 SubDATA...</td></tr>
<tr><td colspan="2">ROW 1 SubDATA1...</td></tr>
</tbody>
<tr>
<td onclick="expandcontract('Row2','ClickIcon2')" id="ClickIcon2" style="cursor: pointer; cursor: hand;">+</td>
<td>ROW 2 - HEADER</td></tr>
<tbody id="Row2" style="display:none">
<tr><td colspan="2">ROW 2 SubDATA...</td></tr>
<tr><td colspan="2">ROW 2 SubDATA1...</td></tr>
</tbody></table>
<br><br>
<table border=1 cellpadding=4 CELLSPACING=0>
<tr>
<td onclick="expandcontract('NRow1','NClickIcon1')" id="NClickIcon1" style="cursor: pointer; cursor: hand;">+</td>
<td>NRow 1 - HEADER</td>
</tr>
<tbody id="NRow1" style="display:none">
<tr><td colspan="2">NRow 1 SubDATA...</td></tr>
<tr><td colspan="2">NRow 1 SubDATA1...</td></tr>
</tbody>
<tr>
<td onclick="expandcontract('NRow2','NClickIcon2')" id="NClickIcon2" style="cursor: pointer; cursor: hand;">+</td>
<td>NRow 2 - HEADER</td></tr>
<tbody id="NRow2" style="display:none">
<tr><td colspan="2">NRow 2 SubDATA...</td></tr>
<tr><td colspan="2">NRow 2 SubDATA1...</td></tr>
</tbody></table>
</body>
</html>
modified
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
// Row Hide function.
// by tcadieux
function expandcontract(tbodyid,dis) {
document.getElementById(tbodyid).style.display = dis;
}
</SCRIPT>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" onclick="expandcontract('Row2','')">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Cross1.gif"onclick="expandcontract('Row2','none')">
<table border=1 cellpadding=4 CELLSPACING=0>
<tr>
<td id="ClickIcon1" style="cursor: pointer; cursor: hand;">+</td>
<td>ROW 1 - HEADER</td>
</tr>
<tbody id="Row1" style="display:none">
<tr><td colspan="2">ROW 1 SubDATA...</td></tr>
<tr><td colspan="2">ROW 1 SubDATA1...</td></tr>
</tbody>
<tr>
<td style="cursor: pointer; cursor: hand;">+</td>
<td>ROW 2 - HEADER</td></tr>
<tbody id="Row2" style="display:none">
<tr><td colspan="2">ROW 2 SubDATA...</td></tr>
<tr><td colspan="2">ROW 2 SubDATA1...</td></tr>
</tbody></table>
<br><br>
</body>
</html>