<!DOCTYPE HTML>
<html lang="de">
<meta charset="utf-8">
<title>my CD</title>
<head>
<link rel=stylesheet href=https://unpkg.com/@picocss/pico@latest/css/pico.min.css>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>
<style>
th:first-child {
cursor: pointer;
}
</style>
<script>
$(document).ready( ()
$ (":contains th:first-child")
.click("tr".closet)
$("tr").nextUntil("tr th").toggle()
)
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Lfd. Nr</th>
<th colspan="3">Name der CD</th>
</tr>
</thead>
<tbody>
<tr>
<th>01</th>
<th colspan="3">100 Rock Hits - The Sound of my Life</th>
</tr>
<tr>
<th>cd1</th>
<th>Interpret</th>
<th>Titel</th>
<th>Zeit</th>
</tr>
<tr>
<td>01.</td>
<td>Golden Earring</td>
<td>Radar Love</td>
<td>05:05</td>
</tr>
<tr>
<td>02.</td>
<td>Heart</td>
<td>Barracuda</td>
<td>04:24</td>
</tr>
<tr>
<th>cd2</th>
<th>Interpret</th>
<th>Titel</th>
<th>Zeit</th>
</tr>
<tr>
<td>01.</td>
<td>Golden Earring 2</td>
<td>Radar Love 2</td>
<td>05:05</td>
</tr>
<tr>
<td>02.</td>
<td>Heart 2</td>
<td>Barracuda 2</td>
<td>04:24</td>
</tr>
</tbody>
<tbody>
<tr>
<th>02</th>
<th colspan="3">100 Classic Hits</th>
</tr>
<tr>
<th>cd1</th>
<th>Interpret</th>
<th>Titel</th>
<th>Zeit</th>
</tr>
<tr>
<td>01.</td>
<td>Judas Priest</td>
<td>Living After Midnight</td>
<td>03:31</td>
</tr>
<tr>
<td>02.</td>
<td>Alice Cooper</td>
<td>No More Mr. Nice Guy</td>
<td>03:07</td>
</tr>
<tr>
<th>cd2</th>
<th>Interpret</th>
<th>Titel</th>
<th>Zeit</th>
</tr>
<tr>
<td>01.</td>
<td>Golden Earring</td>
<td>Radar Love</td>
<td>05:05</td>
</tr>
<tr>
<td>02.</td>
<td>Heart</td>
<td>Barracuda</td>
<td>04:24</td>
</tr>
</tbody>
</table>
</body>
</html>
