Spoiler en JavaScript

Maintenant, nous allons apprendre à créer des spoilers. Par spoilers, j'entends des blocs que l'on peut déplier ou replier à l'aide d'un lien spécifique.

Dans l'exemple de code suivant, le paragraphe avec la classe spoiler est un spoiler, et le lien avec la classe toggle doit, lors d'un clic, afficher ou masquer ce spoiler :

<p>
	paragraphe avec du texte
	<a href="" class="toggle">déplier</a>
</p>
<p class="spoiler">
	spoiler masqué
</p>
<p>
	paragraphe avec du texte
</p>

Dans le texte, il peut bien sûr y avoir plusieurs spoilers et chacun doit avoir son propre lien :

<p>
	paragraphe avec du texte
</p>
<p>
	paragraphe avec du texte
	<a href="" class="toggle">déplier le spoiler 1</a>
</p>
<p class="spoiler">
	spoiler masqué 1
</p>
<p>
	paragraphe avec du texte
</p>
<p>
	paragraphe avec du texte
	<a href="" class="toggle">déplier le spoiler 2</a>
</p>
<p class="spoiler">
	spoiler masqué 2
</p>
<p>
	paragraphe avec du texte
</p>

De toute évidence, le lien pour le dépliage et le spoiler lui-même doivent être liés d'une certaine manière. On peut imaginer diverses options, mais dans ce cas, je propose de le faire par emplacement : disons que le lien avec la classe toggle ouvre ou ferme l'élément avec la classe spoiler, situé juste après le parent de ce lien.

Supposons que le spoiler soit masqué par défaut, et si nous voulons l'afficher - nous lui donnerons la classe active. Écrivons le code CSS correspondant :

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

Copiez les codes HTML et CSS fournis. Implémentez le fonctionnement décrit des spoilers.