JavaScript spoiler

Most megtanuljuk, hogyan készítsünk spoilereket. Spoiler alatt olyan blokkokat értek, amelyeket egy speciális hivatkozás segítségével ki lehet bontani, vagy összecsukni.

A következő kódpéldában a spoiler osztályú bekezdés egy spoiler, a toggle osztályú hivatkozásnak pedig kattintásra kell megjelenítenie vagy elrejtenie ezt a spoilert:

html<p>
  bekezdés szöveggel
  <a href="" class="toggle">kibontás</a>
</p>
<p class="spoiler">
  rejtett spoiler
</p>
<p>
  bekezdés szöveggel
</p>

A szövegben természetesen sok spoiler lehet és mindegyiknek meg kell lennie a saját hivatkozásának:

html<p>
  bekezdés szöveggel
</p>
<p>
  bekezdés szöveggel
  <a href="" class="toggle">1. spoiler kibontása</a>
</p>
<p class="spoiler">
  1. rejtett spoiler
</p>
<p>
  bekezdés szöveggel
</p>
<p>
  bekezdés szöveggel
  <a href="" class="toggle">2. spoiler kibontása</a>
</p>
<p class="spoiler">
  2. rejtett spoiler
</p>
<p>
  bekezdés szöveggel
</p>

Nyilvánvaló, hogy a kiterjesztő hivatkozást és maga a spoiler valahogy összekapcsolható. Különböző megoldások találhatók, de ebben az esetben én az elhelyezkedés alapján javaslom: tegyük fel, hogy a toggle osztályú hivatkozás megnyitja vagy bezárja a spoiler osztályú elemet, amely közvetlenül a hivatkozás szülője alatt található.

A spoiler alapértelmezetten legyen rejtve, és ha meg akarjuk jeleníteni - adjunk neki active osztályt. Írjuk meg a megfelelő CSS kódot:

css.spoiler:not(.active) {
  display: none;
}