Spoiler în JavaScript

Acum vom învăța cum să facem spoiler-e. Prin spoiler-e înțeleg blocuri care pot fi desfășurate sau pliate cu ajutorul unui link special.

În următorul exemplu de cod, paragraful cu clasa spoiler este un spoiler, iar link-ul cu clasa toggle ar trebui să afișeze sau să ascundă acest spoiler la click:

html<p>
  paragraf cu text
  <a href="" class="toggle">desfășoară</a>
</p>
<p class="spoiler">
  spoiler ascuns
</p>
<p>
  paragraf cu text
</p>

În text, desigur, pot fi multe spoiler-e și fiecare ar trebui să aibă propriul link:

html<p>
  paragraf cu text
</p>
<p>
  paragraf cu text
  <a href="" class="toggle">desfășoară spoiler 1</a>
</p>
<p class="spoiler">
  spoiler ascuns 1
</p>
<p>
  paragraf cu text
</p>
<p>
  paragraf cu text
  <a href="" class="toggle">desfășoară spoiler 2</a>
</p>
<p class="spoiler">
  spoiler ascuns 2
</p>
<p>
  paragraf cu text
</p>

Evident, link-ul pentru desfășurare și spoiler-ul în sine trebuie să fie cumva legate. Se pot gândi diverse variante, dar în acest caz eu propun să facem după poziție: să spunem că link-ul cu clasa toggle deschide sau închide elementul cu clasa spoiler, plasat imediat sub părintele acestui link.

Să fie spoiler-ul ascuns în mod implicit, iar dacă vrem să-l afișăm - îi vom da clasa active. Să scriem codul CSS corespunzător:

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