Klicke auf eine der nächsten Überschriften
Hier gibt es einige Section-Elemente mit h2-Überschriften. Durch Anklicken der Überschriften, wird das nächste p-Element, welches auf h2 folgt ein- und ausgeblendet. Das geschieht mit der Zuweisung der Klasse .selected welche die CSS Eigenschaft display:block hat. Dieses nächste Geschwisterelement von h2 das p-Element kann man ermitteln mit nextElementSibling.
classList.toggle('.selected') weist die Klasse .selected zu und entfernt sie wieder bei jedem Aufruf. Es geht hin und her. Die p Elemente im Section haben die CSS Eigenschaft display: none; Die Klasse .selected hat die Eigenschaft display:block. Dadurch wird das nächste p Element bei jedem Klick ein und ausgeblendet.
classList.remove('.selected')entfernt die Klasse .selected. Das soll bei allen p-Elementen geschehen, welche nicht dem gerade angeklickten h2 direkt folgen. Wenn man alle .selected Klassen entfernen würde, und danach classList.toggle anwenden würde, würde zwar das p-Element eingeblendet, dessen h2 gerade angeklickt wurde, aber es würde beim erneuten Anklicken nicht ausgeblendet, denn bevor toggle angewendet wird, wurde es zuvor entfernt. Also muss man das aktuelle p-Element auswählen. Dann kann man es einer if-Struktur abfragen und alle anderen entfernen.
Script
const h = document.querySelectorAll( "section > h2" );
h.forEach( item => item.addEventListener( "click", findSibling ) );
function findSibling ( evt ) {
// Wir definieren die Konstante lokal in der Funktion
const currentSibling = evt.currentTarget.nextElementSibling;
// Alle anderen '.selected' Elemente bereinigen
document.querySelectorAll( '.selected' ).forEach( el => {
if (currentSibling !== el) {
el.classList.remove( 'selected' );
}
} );
// Das aktuelle Element umschalten
currentSibling.classList.toggle( 'selected' );
}