Spoiler in JavaScript

Nu gaan we leren hoe we spoilers maken. Met spoilers bedoel ik blokken die je kunt uitvouwen of invouwen met behulp van een speciale link.

In het volgende codevoorbeeld is de alinea met de klasse spoiler een spoiler, en de link met de klasse toggle moet bij een klik deze spoiler tonen of verbergen:

<p>
	alinea met tekst
	<a href="" class="toggle">uitvouwen</a>
</p>
<p class="spoiler">
	verborgen spoiler
</p>
<p>
	alinea met tekst
</p>

In de tekst kunnen er natuurlijk veel spoilers zijn en elk moet zijn eigen link hebben:

<p>
	alinea met tekst
</p>
<p>
	alinea met tekst
	<a href="" class="toggle">spoiler 1 uitvouwen</a>
</p>
<p class="spoiler">
	verborgen spoiler 1
</p>
<p>
	alinea met tekst
</p>
<p>
	alinea met tekst
	<a href="" class="toggle">spoiler 2 uitvouwen</a>
</p>
<p class="spoiler">
	verborgen spoiler 2
</p>
<p>
	alinea met tekst
</p>

Het is duidelijk dat de link voor het uitvouwen en de spoiler zelf op de een of andere manier gekoppeld moeten worden. Er zijn verschillende opties mogelijk, maar in dit geval stel ik voor om het op locatie te doen: laten we zeggen dat de link met de klasse toggle het element met de klasse spoiler opent of sluit, die zich direct onder de ouder van deze link bevindt.

Laten we de spoiler standaard verborgen zijn, en als we hem willen tonen - geven we hem de klasse active. Laten we de bijbehorende CSS-code schrijven:

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

Kopieer de gegeven HTML- en CSS-codes. Implementeer de beschreven werking van de spoilers.