skryl0v,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My_page3</title>
<style>
.box {
background-color: blue;
display: none;
}
.box.show {
display: table-row;
}
.parent {
background-color: yellow;
}
</style>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
var nodes = document.querySelectorAll(".parent");
[].forEach.call(nodes, function(tr) {
var box = [],
next = tr.nextElementSibling;
while (next && next.classList.contains("box")) {
box.push(next);
next = next.nextElementSibling
}
tr.cells[0].addEventListener("click", function() {
box.forEach(function(item) {
item.classList.toggle("show")
});
return false
})
})
});
</script>
</head>
<body>
<table name="table1" border="1">
<tr class="parent">
<td><a href="#">Gold</a></td>
<td>121</td>
</tr>
<tr class="box">
<td>NewGold</td>
<td>122</td>
</tr>
<tr class="box">
<td>NewNewGold</td>
<td>000</td>
</tr>
<tr class="parent">
<td><a href="#">Box</a></td>
<td>12</td>
</tr>
<tr class="box">
<td>NewBox</td>
<td>13</td>
</tr>
<tr class="parent">
<td><a href="#">Tools</a></td>
<td>10</td>
</tr>
<tr class="box">
<td>Tools</td>
<td>9</td>
</tr>
<tr class="box">
<td>NewTools</td>
<td>14</td>
</tr>
<tr class="box">
<td>NewNewTools</td>
<td>14</td>
</tr>
</table>
</body>
</html>