Если сразу в разметке сделать data-* атрибуты можно написать проще... ) или MVVM в помощь...
<html>
<head>
<style>
.text-center {
text-align: center;
background-color: #333;
color: #fff;
}
.hidden {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
let turn = 0
document.querySelector('table.collapseable').querySelectorAll('tr').forEach(tr => {
if (tr.classList.contains('turn')) {
turn++
(function (turn) {
tr.addEventListener('click', function (e) {
document.querySelectorAll(`tr[data-turn='${turn}']:not(.turn)`)
.forEach(_tr => _tr.classList.toggle('hidden'))
})
})(turn)
}
tr.dataset.turn = turn;
})
})
</script>
</head>
<body>
<table class="collapseable">
<tr class="turn">
<td colspan="4" class="text-center">title</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class="turn">
<td colspan="4" class="text-center">title</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class="turn">
<td colspan="4" class="text-center">title</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>
</html>