Spoiler na JavaScript

Zdaj se bomo naučili delati spoilere. S spoileri mislim bloke, ki jih lahko razširimo ali strnemo s pomočjo posebne povezave.

V naslednjem primeru kode je odstavek z razredom spoiler spoiler, povezava z razredom toggle pa mora ob kliku pokazati ali skriti ta spoiler:

<p>
	odstavek z besedilom
	<a href="" class="toggle">razširi</a>
</p>
<p class="spoiler">
	skrit spoiler
</p>
<p>
	odstavek z besedilom
</p>

V besedilu je seveda lahko veliko spoilerjev in vsak mora imeti svojo povezavo:

<p>
	odstavek z besedilom
</p>
<p>
	odstavek z besedilom
	<a href="" class="toggle">razširi spoiler 1</a>
</p>
<p class="spoiler">
	skrit spoiler 1
</p>
<p>
	odstavek z besedilom
</p>
<p>
	odstavek z besedilom
	<a href="" class="toggle">razširi spoiler 2</a>
</p>
<p class="spoiler">
	skrit spoiler 2
</p>
<p>
	odstavek z besedilom
</p>

Očitno je, da je treba povezavo za razširjanje in sam spoiler na nek način povezati. Lahko si zamislimo različne možnosti, vendar v tem primeru jaz predlagam, da naredimo po lokaciji: recimo, da povezava z razredom toggle odpre ali zapre element z razredom spoiler, ki se nahaja takoj pod staršem te povezave.

Naj bo spoiler privzeto skrit, in če ga želimo prikazati - mu dajmo razred active. Napišimo ustrezen CSS kodo:

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

Kopirajte si navedeni HTML in CSS kodi. Implementirajte opisano delovanje spoilerjev.