Header neu gestalten

[Rolf B]

Hallo AudioBibel,

Ich vermute aber, daß ich noch mehr umbauen muß, da ja jetzt auch JAVA an Bord ist.

Nein. Nicht Java. JavaScript. Das sind verschiedene Sprachen.

Javasricpt hatten wir bislang bewußt weggelassen (glaube ich zumindestens).

Da glaubst Du falsch. Guck nach /skripte/script.js, darin sind die Funktionen GruppeEinblenden und GruppeAusblenden, die ihr mit onclick=... an die entsprechenden divs hängt. Dazu noch zwei Cookie-Funktionen, die dazu zu dienen scheinen, den Ausklappstatus festzuhalten. Und eine Cookie-Auswertefunktion, die am load Event des Body hängt.

Die Alternative ist ein DOMContentLoaded Handler, das muss man erstmal kennen.

Hab' ich mir mal kurz angeschaut: Kenn ich nicht und das sind für mich wirklich nur "Böhmische Dörfer". Zu viel, um mich da auch noch einzulesen.

Nein, denk mal nach. Ihr macht das jetzt auch schon, nur nicht über DOMContentLoaded, sondern über das load Event. Guck, was bei eurem Body steht: onload="CookieAuswerten()". Das kannst du in einem Script auch so machen:

document.body.addEventListener("load", CookieAuswerten);

bzw. DOMContentLoaded statt load - der Unterschied ist, dass DOMContentLoaded etwas früher feuert. Bei load werden noch ein paar Ressourcen abgewartet. Wenn euer Script ganz am Ende des body eingebunden wird, brauchst Du aber weder das load noch das DOMContentLoaded Event abzuwarten, sondern kannst einfach mit dem Script loslegen, weil das DOM dann schon bereitsteht und manipuliert werden kann.

Euer onload ruft CookieAuswerten auf. Wenn das Script am body-Ende steht, dann rufst Du dort CookieAuswerten einfach direkt vor oder nach meinem addEventListener('click'...) auf. Fertig. Kein onload mehr, kein Hantieren mit DOMContentLoaded nötig. Das CookieLoschen und CookieSetzen müsstest Du in meinen Eventhandler passend einbauen, und CookieAuswerten muss so geändert werden, dass es die Tables sichtbar macht statt Rows.

Und ihr habt noch mehr JavaScript drin: die aktuelle Seite hat

<div ... onload="GruppeEinblenden('GruppeGeschichte')">...</div>
<div ... onload="GruppeAusblenden('GruppeGeschichte')">...</div>

und class='GruppeGeschichte' an den Rows, die dann ein- oder auszublenden sind.

Mein JSFiddle hat

<button class="expander" aria-controls="at-hist" aria-expanded="true">...</button>

Das at-hist ist die ID der Table, die aus- oder einzublenden ist. Da bei mir eine Gruppe eine Table ist, muss ich das nicht auf Row-Ebene machen, sondern kann die ganze Table verstecken. Das mache ich durch hinzufügen der Klasse visible an eine einzublendende Table, und die CSS Regel table:not(visible) { display:none; }. Über aria-expanded merke ich mir, ob der Bereich ein- oder ausgeblendet ist.

Rolf