Spojler w JavaScript

Teraz nauczymy się robić spojlery. Przez spojlery rozumiem bloki, które można rozwinąć lub zwinąć za pomocą specjalnego linku.

W następnym przykładzie kodu akapit z klasą spoiler jest spojlerem, a link z klasą toggle po kliknięciu ma pokazać lub ukryć ten spojler:

<p>
	akapit z tekstem
	<a href="" class="toggle">rozwiń</a>
</p>
<p class="spoiler">
	ukryty spojler
</p>
<p>
	akapit z tekstem
</p>

W tekście oczywiście może być wiele spojlerów i każdy powinien mieć swój własny link:

<p>
	akapit z tekstem
</p>
<p>
	akapit z tekstem
	<a href="" class="toggle">rozwiń spojler 1</a>
</p>
<p class="spoiler">
	ukryty spojler 1
</p>
<p>
	akapit z tekstem
</p>
<p>
	akapit z tekstem
	<a href="" class="toggle">rozwiń spojler 2</a>
</p>
<p class="spoiler">
	ukryty spojler 2
</p>
<p>
	akapit z tekstem
</p>

Oczywiście, że link do rozwinięcia i sam spojler trzeba jakoś powiązać. Można wymyślić różne warianty, ale w tym przypadku proponuję zrobić to po położeniu: powiedzmy, że link z klasą toggle otwiera lub zamyka element z klasą spoiler, znajdujący się bezpośrednio pod rodzicem tego linku.

Niech spojler domyślnie będzie ukryty, a jeśli chcemy go pokazać - nadajmy mu klasę active. Napiszmy odpowiedni kod CSS:

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

Skopiuj podane kody HTML i CSS. Zaimplementuj opisaną działanie spojlerów.