Скрыть/Показать
Для скрытия или показа информации используйте класс hide-show
Пример
Для того чтобы использовать данный функционал используйте следующую верстку:
<div class="hide-show">
<a href="#" class="hide-show-btn hide">Скрыть</a>
<a href="#" class="hide-show-btn show">Показать</a>
<div class="hide-show-block">Это контент блока который скрывается или показывается.</div>
</div>
Скрытое состояние
Для того чтобы блок с информацией показывался скрытым, необходимо в обертку добавить класс hidden
.
<div class="hide-show hidden">
<a href="#" class="hide-show-btn hide">Скрыть</a>
<a href="#" class="hide-show-btn show">Показать</a>
<div class="hide-show-block">Это контент блока который скрывается или показывается.</div>
</div>
Несколько блоков на странице
Вы можете использовать множетсво блоков скрыть/показать на странице. Для каждого может задаваться свой начальный статус показа.
Блок 1
Блок 2
<h3>Блок 1</h3>
<div class="hide-show">
<a href="#" class="hide-show-btn hide">Скрыть</a>
<a href="#" class="hide-show-btn show">Показать</a>
<div class="hide-show-block">Это контент первого блока который скрывается или показывается.</div>
</div>
<h3>Блок 2</h3>
<div class="hide-show hidden">
<a href="#" class="hide-show-btn hide">Скрыть</a>
<a href="#" class="hide-show-btn show">Показать</a>
<div class="hide-show-block">Это контент второго блока который скрывается или показывается.</div>
</div>