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