Spoiler en JavaScript

Ahora aprenderemos a hacer spoilers. Por spoilers entiendo bloques que se pueden expandir o contraer mediante un enlace especial.

En el siguiente ejemplo de código, el párrafo con la clase spoiler es un spoiler, y el enlace con la clase toggle debe, al hacer clic, mostrar u ocultar este spoiler:

<p>
	párrafo con texto
	<a href="" class="toggle">expandir</a>
</p>
<p class="spoiler">
	spoiler oculto
</p>
<p>
	párrafo con texto
</p>

En el texto, por supuesto, puede haber muchos spoilers y cada uno debe tener su propio enlace:

<p>
	párrafo con texto
</p>
<p>
	párrafo con texto
	<a href="" class="toggle">expandir spoiler 1</a>
</p>
<p class="spoiler">
	spoiler oculto 1
</p>
<p>
	párrafo con texto
</p>
<p>
	párrafo con texto
	<a href="" class="toggle">expandir spoiler 2</a>
</p>
<p class="spoiler">
	spoiler oculto 2
</p>
<p>
	párrafo con texto
</p>

Obviamente, el enlace para expandir y el spoiler en sí deben estar vinculados de alguna manera. Se pueden idear diferentes opciones, pero en este caso sugiero hacerlo por ubicación: digamos que el enlace con la clase toggle abre o cierra el elemento con la clase spoiler, ubicado justo debajo del padre de este enlace.

Que el spoiler esté oculto por defecto, y si queremos mostrarlo, le daremos la clase active. Escribamos el código CSS correspondiente:

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

Copie los códigos HTML y CSS proporcionados. Implemente el funcionamiento descrito de los spoilers.