Spoiler in JavaScript

Ora impareremo a creare degli spoiler. Per spoiler intendo blocchi che possono essere espansi o compressi tramite un link apposito.

Nel seguente esempio di codice, il paragrafo con classe spoiler è uno spoiler, e il link con classe toggle al click dovrebbe mostrare o nascondere questo spoiler:

html<p>
  paragrafo con testo
  <a href="" class="toggle">espandi</a>
</p>
<p class="spoiler">
  spoiler nascosto
</p>
<p>
  paragrafo con testo
</p>

Nel testo, ovviamente, possono esserci molti spoiler e ognuno dovrebbe avere il proprio link:

html<p>
  paragrafo con testo
</p>
<p>
  paragrafo con testo
  <a href="" class="toggle">espandi spoiler 1</a>
</p>
<p class="spoiler">
  spoiler nascosto 1
</p>
<p>
  paragrafo con testo
</p>
<p>
  paragrafo con testo
  <a href="" class="toggle">espandi spoiler 2</a>
</p>
<p class="spoiler">
  spoiler nascosto 2
</p>
<p>
  paragrafo con testo
</p>

Ovviamente, il link per l'espansione e lo spoiler stesso devono essere in qualche modo collegati. Si possono ideare varie opzioni, ma in questo caso propongo di farlo in base alla posizione: diciamo che il link con classe toggle apre o chiude l'elemento con classe spoiler, posizionato immediatamente sotto il genitore di questo link.

Lasciamo che lo spoiler sia nascosto di default, e se vogliamo mostrarlo - gli assegniamo la classe active. Scriviamo il corrispondente codice CSS:

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