Spoiler v JavaScripte

Teraz sa naučíme robiť spoilery. Pod spoilermi majme na mysli bloky, ktoré je možné rozvinúť alebo zvinúť pomocou špeciálneho odkazu.

V nasledujúcom príklade kódu je odsek s triedou spoiler spoilerom a odkaz s triedou toggle by po kliknutí mal zobraziť alebo skryť tento spoiler:

html<p>
  odsek s textom
  <a href="" class="toggle">rozvinúť</a>
</p>
<p class="spoiler">
  skrytý spoiler
</p>
<p>
  odsek s textom
</p>

V texte sa, samozrejme, môže nachádzať viac spoilerov a každý by mal mať svoj vlastný odkaz:

html<p>
  odsek s textom
</p>
<p>
  odsek s textom
  <a href="" class="toggle">rozvinúť spoiler 1</a>
</p>
<p class="spoiler">
  skrytý spoiler 1
</p>
<p>
  odsek s textom
</p>
<p>
  odsek s textom
  <a href="" class="toggle">rozvinúť spoiler 2</a>
</p>
<p class="spoiler">
  skrytý spoiler 2
</p>
<p>
  odsek s textom
</p>

Je zrejmé, že odkaz na rozbalenie a sám spoiler treba nejako prepojiť. Je možné vymyslieť rôzne možnosti, ale v tomto prípade návrhujem urobiť to podľa umiestnenia: povedzme, že odkaz s triedou toggle otvára alebo zatvára prvok s triedou spoiler, ktorý sa nachádza hneď pod rodičom tohto odkazu.

Nech je spoiler predvolene skrytý, a ak ho chceme zobraziť - pridáme mu triedu active. Napíšme zodpovedajúci CSS kód:

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