Spojler u JavaScriptu

Sada ćemo naučiti kako da pravimo spojlere. Pod spojlerima podrazumevam blokove koje možemo otvoriti ili zatvoriti pomoću specijalne veze (linka).

U sledećem primeru koda paragraf sa klasom spoiler predstavlja spojler, a veza sa klasom toggle treba da klikom pokaže ili sakrije taj spojler:

<p>
	paragraf sa tekstom
	<a href="" class="toggle">otvori</a>
</p>
<p class="spoiler">
	sakriveni spojler
</p>
<p>
	paragraf sa tekstom
</p>

U tekstu, naravno, može biti više spojlera i svaki treba da ima svoju vezu:

<p>
	paragraf sa tekstom
</p>
<p>
	paragraf sa tekstom
	<a href="" class="toggle">otvori spojler 1</a>
</p>
<p class="spoiler">
	sakriveni spojler 1
</p>
<p>
	paragraf sa tekstom
</p>
<p>
	paragraf sa tekstom
	<a href="" class="toggle">otvori spojler 2</a>
</p>
<p class="spoiler">
	sakriveni spojler 2
</p>
<p>
	paragraf sa tekstom
</p>

Očigledno je da vezu za otvaranje i sam spojler treba nekako povezati. Možemo smisliti različite varijante, ali u ovom slučaju ja predlažem da to učinimo po poziciji: recimo da veza sa klasom toggle otvara ili zatvara element sa klasom spoiler, koji se nalazi odmah ispod roditelja ove veze.

Neka spojler po podrazumevanom podešavanju bude sakriven, a ako želimo da ga prikažemo - davaćemo mu klasu active. Napišimo odgovarajući CSS kod:

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

Kopirajte sebi dati HTML i CSS kod. Implementirajte opisan rad spojlera.