JavaScripti spoiler

Praegu õpime tegema spoilereid. Spoilerite all mõistan blokke, mida saab lahti voltida või kokku voltida spetsiaalse lingi abil.

Järgmises koodinäites on lõik klassiga spoiler spoiler ja link klassiga toggle peaks klõpsul näitama või peitma selle spoileri:

<p>
	lõik tekstiga
	<a href="" class="toggle">laienda</a>
</p>
<p class="spoiler">
	peidetud spoiler
</p>
<p>
	lõik tekstiga
</p>

Tekstis võib muidugi olla palju spoilereid ja igal peab olema oma link:

<p>
	lõik tekstiga
</p>
<p>
	lõik tekstiga
	<a href="" class="toggle">laienda spoiler 1</a>
</p>
<p class="spoiler">
	peidetud spoiler 1
</p>
<p>
	lõik tekstiga
</p>
<p>
	lõik tekstiga
	<a href="" class="toggle">laienda spoiler 2</a>
</p>
<p class="spoiler">
	peidetud spoiler 2
</p>
<p>
	lõik tekstiga
</p>

Ilmselgelt tuleb laiendamise lingi ja spoileri enda omavahel kuidagi seostada. Võib välja mõelda erinevaid variante, kuid antud juhul ma panen ette teha seda asukoha järgi: ütleme, et link klassiga toggle avab või sulgeb elemendi klassiga spoiler, asub kohe selle lingi vanema elemendi järel.

Olgu spoiler vaikimisi peidetud, ja kui me tahame seda näidata - anname sellele klassi active. Kirjutame vastava CSS koodi:

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

Kopeerige endale toodud HTML ja CSS koodid. Rakendage kirjeldatud spoilerite tööd.