# Спойлер на JavaScript

Сейчас мы научимся делать спойлеры. Под спойлерами я понимаю блоки, которые можно развернуть, либо свернуть с помощью специальной ссылки.

В следующем примере кода абзац с классом `spoiler` является спойлером, а ссылка с классом `toggle` должна по клику показывать или скрывать этот спойлер:

`<p> абзац с текстом <a href="" class="toggle">развернуть</a> </p> <p class="spoiler"> скрытый спойлер </p> <p> абзац с текстом </p>`

В тексте, конечно же, может быть много спойлеров и у каждого должна быть своя ссылка:

`<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 код:

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

Скопируйте себе приведенный HTML и CSS коды. Реализуйте описанную работу спойлеров.

← →
↑
en ru