Spojler w JavaScript

Teraz nauczymy się robić spojlery. Przez spojlery rozumiem bloki, które można rozwinąć lub zwinąć za pomocą specjalnego linku.

W następnym przykładzie kodu akapit z klasą spoiler jest spojlerem, a link z klasą toggle po kliknięciu ma pokazać lub ukryć ten spojler:

html<p>
  akapit z tekstem
  <a href="" class="toggle">rozwiń</a>
</p>
<p class="spoiler">
  ukryty spojler
</p>
<p>
  akapit z tekstem
</p>

W tekście oczywiście może być wiele spojlerów i każdy powinien mieć swój własny link:

html<p>
  akapit z tekstem
</p>
<p>
  akapit z tekstem
  <a href="" class="toggle">rozwiń spojler 1</a>
</p>
<p class="spoiler">
  ukryty spojler 1
</p>
<p>
  akapit z tekstem
</p>
<p>
  akapit z tekstem
  <a href="" class="toggle">rozwiń spojler 2</a>
</p>
<p class="spoiler">
  ukryty spojler 2
</p>
<p>
  akapit z tekstem
</p>

Oczywiście, że link do rozwinięcia i sam spojler trzeba jakoś powiązać. Można wymyślić różne warianty, ale w tym przypadku proponuję zrobić to po położeniu: powiedzmy, że link z klasą toggle otwiera lub zamyka element z klasą spoiler, znajdujący się bezpośrednio pod rodzicem tego linku.

Niech spojler domyślnie będzie ukryty, a jeśli chcemy go pokazać - nadajmy mu klasę active. Napiszmy odpowiedni kod CSS:

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