JavaScript spoiler

Most megtanuljuk, hogyan készítsünk spoilereket. Spoiler alatt olyan blokkokat értek, amelyeket egy speciális hivatkozás segítségével ki lehet bontani, vagy összecsukni.

A következő kódpéldában a spoiler osztályú bekezdés egy spoiler, a toggle osztályú hivatkozásnak pedig kattintásra kell megjelenítenie vagy elrejtenie ezt a spoilert:

<p>
	bekezdés szöveggel
	<a href="" class="toggle">kibontás</a>
</p>
<p class="spoiler">
	rejtett spoiler
</p>
<p>
	bekezdés szöveggel
</p>

A szövegben természetesen sok spoiler lehet és mindegyiknek meg kell lennie a saját hivatkozásának:

<p>
	bekezdés szöveggel
</p>
<p>
	bekezdés szöveggel
	<a href="" class="toggle">1. spoiler kibontása</a>
</p>
<p class="spoiler">
	1. rejtett spoiler
</p>
<p>
	bekezdés szöveggel
</p>
<p>
	bekezdés szöveggel
	<a href="" class="toggle">2. spoiler kibontása</a>
</p>
<p class="spoiler">
	2. rejtett spoiler
</p>
<p>
	bekezdés szöveggel
</p>

Nyilvánvaló, hogy a kiterjesztő hivatkozást és maga a spoiler valahogy összekapcsolható. Különböző megoldások találhatók, de ebben az esetben én az elhelyezkedés alapján javaslom: tegyük fel, hogy a toggle osztályú hivatkozás megnyitja vagy bezárja a spoiler osztályú elemet, amely közvetlenül a hivatkozás szülője alatt található.

A spoiler alapértelmezetten legyen rejtve, és ha meg akarjuk jeleníteni - adjunk neki active osztályt. Írjuk meg a megfelelő CSS kódot:

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

Másolja le a megadott HTML és CSS kódokat. Valósítsa meg a spoilerek leírt működését.