Сейчас мы с вами научимся делать спойлеры. Под спойлерами я понимаю блоки, которые можно развернуть, либо свернуть с помощью специальной ссылки.
В следующем примере кода абзац с классом 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="toggler">развернуть спойлер 2</a>
</p>
<p class="spoiler">
скрытый спойлер 2
</p>
<p>
абзац с текстом
</p>
Очевидно, что ссылку для разворачивания и сам спойлер надо как-то связать. Можно придумать различные варианты, но в данном случае я предлагаю сделать по местоположению: скажем, что ссылка с классом toggle открывает или закрывает элемент с классом spoiler, расположенный сразу под родителем этой ссылки.
Пусть спойлер по умолчанию будет скрыт, а если мы хотим его показать - будем давать ему класс active. Напишем соответствующий CSS код:
.spoiler:not(.active) {
display: none;
}
Скопируйте себе приведенный HTML и CSS коды. Реализуйте описанную работу спойлеров.