Спојлер на JavaScript-у

Сада ћемо научити како се праве спојлери. Под спојлерима подразумевам блокове које можемо развити или скупити помоћу специјалне везе.

У следећем примеру кода, пасус са класом spoiler је спојлер, а веза са класом toggle треба да при клику прикаже или сакрије тај спојлер:

html<p>
  пасус са текстом
  <a href="" class="toggle">развиј</a>
</p>
<p class="spoiler">
  сакривени спојлер
</p>
<p>
  пасус са текстом
</p>

У тексту, наравно, може бити много спојлера и сваки треба да има своју везу:

html<p>
  пасус са текстом
</p>
<p>
  пасус са текстом
  <a href="" class="toggle">развиј спојлер 1</a>
</p>
<p class="spoiler">
  сакривени спојлер 1
</p>
<p>
  пасус са текстом
</p>
<p>
  пасус са текстом
  <a href="" class="toggle">развиј спојлер 2</a>
</p>
<p class="spoiler">
  сакривени спојлер 2
</p>
<p>
  пасус са текстом
</p>

Очигледно је да везу за развој и сам спојлер треба некако повезати. Може се смислити различите варијанте, али у овом случају ја предлажем да урадимо по локацији: рецимо да веза са класом toggle отвара или затвара елемент са класом spoiler, који се налази одмах испод родитеља те везе.

Нека спојлер подразумевано буде сакривен, а ако желимо да га прикажемо - даћемо му класу active. Напишимо одговарајући CSS код:

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