Спойлер на 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;
}