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:

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

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

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