JavaScript: Toggle für verschiedene Elemente

[Rolf b]

details/summary Tag:

• MDN: Dies ist eine experimentelle Technologie.
• caniuse.com: Keine IE oder Edge Unterstützung. Insgesamt 88% globale Unterstützung, 83% in Deutschland.

Wenn das für dich ok ist, wäre das vermutlich genau das Richtige für dich.

Mit Javascript+jQuery und ohne Variablen-Schwemme würde ich das so machen (Die JQuery API Doku kennst Du?)

• Jeden Schritt in einen Container legen. Dieser Container bekommt eine eigene Klasse. Das hast Du schon: div class="qp-container". Gerne darfst Du dafür auch das section-Element verwenden.
• Den Click-Handler für die Buttons mit jQuery registrieren. Das musst Du nicht für jeden Button einzeln von Hand machen, jQuery kann das besser.

Möglichkeit 1:

$(".qp-container button").on("click", function() {...})

Damit registrierst Du einen Click-Handler pro Button in einem qp-container. D.h. bei 17 Schritten mit je 4 Konversationen registrierst Du 68 Eventhandler, und vor allem muss jQuery das ganze DOM nach diesem Selektor durchflöhen. Das dauert ggf. etwas. Innerhalb der Handler-Funktion bezieht this sich auf diesen Button.

Wie Du von dort aus zu den Konversationselementen kommst, hängt von deiner HTML Struktur ab. Wenn der Button und die Konversationselemente Geschwisterknoten sind, d.h. das gleiche direkte Parent-Element haben, kannst Du mit

$(this).nextAll(".qp-conversations")

arbeiten (ich unterstelle mal, dass Du die Konversationen mit einer Klasse qp-conversations identifizierst). Ist diese direkte Verwandschaft nicht gegeben, musst Du zuerst zu einem gemeinsamen Elternteil hoch und von da aus wieder hinab:

$(this).parent(".qp-container").find(".qp-conversations")

würde funktionieren. Daran hängst Du noch ein .toggleClass("visible") oder ähnlich an und sorgst per CSS dafür, dass die Elemente nur sichtbar sind wenn sie die visible-Klasse haben. Das hat gegenüber show/hide den Vorteil, dass Du nicht wissen musst, ob sie gerade sichtbar sind oder nicht.

Möglichkeit 2: Du legst um alle Schritte noch einen weiteren Container, am besten mit einer ID. Hier nehme ich mal die ID "conversations". Dann kannst Du mit delegierten Events arbeiten.

$("#conversations").on("click", ".qp-container button", function() {...})

Diese Methode muss nur ein Element finden und registriert nur einen einzigen Event-Handler, nicht einen pro Button. Sie nutzt aus, dass Ereignisse "nach oben blubbern", d.h. wenn Du den Button klickst, werden der Reihe nach der Button und dann seine Eltern-Elemente vom Klick benachrichtigt. Der zweite Parameter von on ist ein Filter, er sorgt dafür, dass nur click-Events von button-Elementen in einem Element mit Klasse .gp-container verarbeitet werden. D.h. die Zeit, die Du beim Registrieren sparst, geht beim Filtern der Events wieder drauf. Unterm Strich solltest Du damit aber günstiger fahren. Auch hier bezieht sich in der Handler-Funktion this wieder auf das geklickte Element, und du kannst wie oben die Konversationen suchen.

Details zur Event-Registrierung mit jQuery stehen hier.

Rolf