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:

html<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:

html<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:

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