Código HTML:
<html>
<head>
<title></title>
<style type="text/css">
.apartado{ cursor: pointer; }
</style>
<script language="javascript">
function ocultarFila(idTabla, fila)
{
tr = document.getElementById(idTabla).getElementsByTagName('tr')[fila];
tr.style.display = tr.style.display == '' ? 'none' : '';
}
</script>
</head>
<body>
<form>
<table id="myTable" border="1 ">
<tr>
<td>Apartado1</td>
<td> </td>
</tr>
<tr>
<td>Apartado2</td>
<td> </td>
</tr>
<tr>
<td class="apartado" onClick="ocultarFila('myTable', 3); ocultarFila('myTable', 4);">Apartado3</td>
<td> </td>
</tr>
<tr style="display:none">
<td> </td>
<td>Subapartado31</td>
</tr>
<tr style="display:none">
<td> </td>
<td>Subapartado32</td>
</tr>
<tr>
<td>Apartado4</td>
<td> </td>
</tr>
<td class="apartado" onClick="ocultarFila('myTable', 7); ocultarFila('myTable', 8); ocultarFila('myTable', 9);">Apartado5</td>
<td> </td>
</tr>
<tr style="display:none">
<td> </td>
<td>Subapartado51</td>
</tr>
<tr style="display:none">
<td> </td>
<td>Subapartado52</td>
</tr>
<tr style="display:none">
<td> </td>
<td>Subapartado53</td>
</tr>
</table>
</form>
</body>
</html> Y aquí una
muestra.