Spoiler v JavaScriptu

Nyní se naučíme vytvářet spoilery. Pod spoilery mám na mysli bloky, které lze rozbalit nebo sbalit pomocí speciálního odkazu.

V následujícím příkladu kódu je odstavec s třídou spoiler spoilerem a odkaz s třídou toggle by po kliknutí měl zobrazit nebo skrýt tento spoiler:

html<p>
  odstavec s textem
  <a href="" class="toggle">rozbalit</a>
</p>
<p class="spoiler">
  skrytý spoiler
</p>
<p>
  odstavec s textem
</p>

V textu samozřejmě může být mnoho spoilerů a každý by měl mít svůj vlastní odkaz:

html<p>
  odstavec s textem
</p>
<p>
  odstavec s textem
  <a href="" class="toggle">rozbalit spoiler 1</a>
</p>
<p class="spoiler">
  skrytý spoiler 1
</p>
<p>
  odstavec s textem
</p>
<p>
  odstavec s textem
  <a href="" class="toggle">rozbalit spoiler 2</a>
</p>
<p class="spoiler">
  skrytý spoiler 2
</p>
<p>
  odstavec s textem
</p>

Je zřejmé, že je třeba odkaz pro rozbalení a samotný spoiler nějak propojit. Lze vymyslet různé varianty, ale v tomto případě navrhuji udělat to podle umístění: řekněme, že odkaz s třídou toggle otevírá nebo zavírá prvek s třídou spoiler, umístěný přímo pod rodičem tohoto odkazu.

Nechť je spoiler ve výchozím nastavení skrytý, a pokud jej chceme zobrazit - přidáme mu třídu active. Napišme odpovídající CSS kód:

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