Earlenrico
Neues Mitglied
Hallo zusammen, ich möchte hier ein neues Thread aufmachen.
Der Grundgedanke entstand vor ca. 3 Jahren. URL: https://www.html.de/threads/div-container-mit-tabelle-und-toggle.60896/
Ich möchte eine Tabelle erstellen von CD‘s.
Ich möchte, dass in der Tabelle stehen:
Name der / des Albums
CD 1 eventl. CD 2
Titel und Länge des Titels
Was nicht das Problem ist.
Mein Problem ist, ich möchte,
Schritt: Klick auf das Album. CD 1 eventuell CD 2 sich öffnet.
Schritt: Klick auf CD 1, die Musiktitel erscheinen. Das ganze für eventuell CD 2.
Dann das ganze wieder schließen.
Schritt: Klick auf CD 1, die Musiktitel verschwinden.
Schritt: Klick auf das Album, CD 1 eventuell CD 2 verschwinden.
Ich hänge hier einen Code von damals an, der teilweise auch funktioniert. Ich hätte diesen Code aber am liebsten ohne Javascript, sondern nur in CSS. Wenn es einfacher ist, mit Javascript.
Ich habe mir ein HTML-Gerüst gebaut, um darauf aufbauen zu können.
Vielen Dank für eure Hilfe bzw. Vorschläge. Mit freundlichen Grüßen Enrico
Der Grundgedanke entstand vor ca. 3 Jahren. URL: https://www.html.de/threads/div-container-mit-tabelle-und-toggle.60896/
Ich möchte eine Tabelle erstellen von CD‘s.
Ich möchte, dass in der Tabelle stehen:
Name der / des Albums
CD 1 eventl. CD 2
Titel und Länge des Titels
Was nicht das Problem ist.
Mein Problem ist, ich möchte,
Schritt: Klick auf das Album. CD 1 eventuell CD 2 sich öffnet.
Schritt: Klick auf CD 1, die Musiktitel erscheinen. Das ganze für eventuell CD 2.
Dann das ganze wieder schließen.
Schritt: Klick auf CD 1, die Musiktitel verschwinden.
Schritt: Klick auf das Album, CD 1 eventuell CD 2 verschwinden.
Ich hänge hier einen Code von damals an, der teilweise auch funktioniert. Ich hätte diesen Code aber am liebsten ohne Javascript, sondern nur in CSS. Wenn es einfacher ist, mit Javascript.
Code:
Gestern um 11:14
Lesezeichen hinzufügen
#5
Man sollte es nicht zu umständlich machen...
Code:
<!DOCTYPE HTML>
<html lang=de>
<meta charset=utf-8>
<title>my CD</title>
<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 {
font-weight: bold;
color: red;
}
tbody tr:first-child th:first-child{
cursor:pointer;
}
</style>
<script>
$(document).ready( () =>
$( "tbody tr:first-child th:first-child" )
.click( el =>
$(el.target)
.closest('tbody').find('tr:first-child~tr').toggle()
)
)
</script>
<body class=container>
<table>
<thead>
<tr>
<th>Lfd. Nr
<th colspan="3">Name der CD
<tr>
<th>01
<th colspan="3">100 Rock Hits - The Sound of my Life
<tbody>
<tr>
<th>cd1<th>Interpret<th>Titel<th>Zeit
<tr>
<td>01.<td>Golden Earring
<td>Radar Love<td>05:05
<tr>
<td>02.<td>Heart
<td>Barracuda<td>04:24
<tr>
<td>03.<td>Judas Priest
<td>Living After Midnight<td>03:31
<tr>
<td>04.<td>Alice Cooper
<td>No More Mr. Nice Guy<td>03:07
<tbody>
<tr>
<th>cd2<th>Interpret<th>Titel<th>Zeit
<tr>
<td>01.</td><td>Golden Earring
<td>Radar Love<td>05:05
<tr>
<td>02.<td>Heart
<td>Barracuda<td>04:24
<tr>
<td>03.<td>Judas Priest
<td>Living After Midnight<td>03:31
<tr>
<td>04.<td>Alice Cooper
<td>No More Mr. Nice Guy<td>03:07
<tr>
<tbody>
<th>02.
<th colspan="3">Andrea Bocelli - Cieli Di Toscana</th>
<tr>
<td>01.</td>
<td>Andrea Bocelli</td>
<td>Chiara</td>
<td>04:04</td>
</table>Ich habe mir ein HTML-Gerüst gebaut, um darauf aufbauen zu können.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>musik</title>
</head>
<body>
<table border="1">
<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>CD_01</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>
<td>03.</td>
<td>Judas Priest</td>
<td>Living After Midnight</td>
<td>03:31</td>
</tr>
<tr>
<td>04.</td>
<td>Alice Cooper</td>
<td>No More Mr. Nice Guy</td>
<td>03:07</td>
</tr>
<tr>
<th>CD_02</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>02.</th>
<th colspan="3">Andrea Bocelli - Cieli Di Toscana</th>
</tr>
<tr>
<th>CD_01</th>
<th>Interpret</th>
<th>Titel</th>
<th>Zeit</th>
</tr>
<tr>
<td>01.</td>
<td>Andrea Bocelli</td>
<td>Chiara</td>
<td>04:04</td>
</tr>
</tbody>
</table>
</body>
</html>
Zuletzt bearbeitet:
Kannst du mir trotzdem helfen? 
