Spoiler in JavaScript

Jetzt lernen wir, wie man Spoiler erstellt. Unter Spoiler verstehe ich Blöcke, die mit Hilfe eines speziellen Links aufgeklappt oder zugeklappt werden können.

Im folgenden Codebeispiel ist der Absatz mit der Klasse spoiler ein Spoiler, und der Link mit der Klasse toggle soll bei Klick diesen Spoiler anzeigen oder verbergen:

<p>
	Absatz mit Text
	<a href="" class="toggle">aufklappen</a>
</p>
<p class="spoiler">
	versteckter Spoiler
</p>
<p>
	Absatz mit Text
</p>

Im Text können natürlich viele Spoiler vorkommen, und jeder sollte seinen eigenen Link haben:

<p>
	Absatz mit Text
</p>
<p>
	Absatz mit Text
	<a href="" class="toggle">Spoiler 1 aufklappen</a>
</p>
<p class="spoiler">
	versteckter Spoiler 1
</p>
<p>
	Absatz mit Text
</p>
<p>
	Absatz mit Text
	<a href="" class="toggle">Spoiler 2 aufklappen</a>
</p>
<p class="spoiler">
	versteckter Spoiler 2
</p>
<p>
	Absatz mit Text
</p>

Offensichtlich müssen der Link zum Aufklappen und der Spoiler selbst irgendwie verbunden werden. Es gibt verschiedene Möglichkeiten, aber in diesem Fall schlage ich vor, es über die Position zu machen: Nehmen wir an, dass der Link mit der Klasse toggle das Element mit der Klasse spoiler anzeigt oder ausblendet, das sich direkt unter dem übergeordneten Element dieses Links befindet.

Der Spoiler soll standardmäßig ausgeblendet sein, und wenn wir ihn anzeigen wollen, geben wir ihm die Klasse active. Schreiben wir den entsprechenden CSS-Code:

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

Kopieren Sie den angegebenen HTML- und CSS-Code. Implementieren Sie die beschriebene Funktionalität der Spoiler.