Spoiler em JavaScript

Agora vamos aprender a fazer spoilers. Por spoilers, entendo blocos que podem ser expandidos ou recolhidos usando um link especial.

No próximo exemplo de código, o parágrafo com a classe spoiler é um spoiler, e o link com a classe toggle deve, ao ser clicado, mostrar ou ocultar este spoiler:

html<p>
  parágrafo com texto
  <a href="" class="toggle">expandir</a>
</p>
<p class="spoiler">
  spoiler oculto
</p>
<p>
  parágrafo com texto
</p>

No texto, é claro, pode haver vários spoilers e cada um deve ter seu próprio link:

html<p>
  parágrafo com texto
</p>
<p>
  parágrafo com texto
  <a href="" class="toggle">expandir spoiler 1</a>
</p>
<p class="spoiler">
  spoiler oculto 1
</p>
<p>
  parágrafo com texto
</p>
<p>
  parágrafo com texto
  <a href="" class="toggle">expandir spoiler 2</a>
</p>
<p class="spoiler">
  spoiler oculto 2
</p>
<p>
  parágrafo com texto
</p>

Obviamente, o link para expandir e o próprio spoiler precisam estar de alguma forma vinculados. Podemos pensar em diferentes opções, mas neste caso eu proponho fazer por localização: digamos que o link com a classe toggle abre ou fecha o elemento com a classe spoiler, localizado imediatamente após o elemento pai deste link.

Vamos deixar o spoiler oculto por padrão, e se quisermos mostrá-lo - vamos dar a ele a classe active. Vamos escrever o código CSS correspondente:

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