2. SIMAI Framework - Универсальная веб-платформа для создания интерфейса информационных систем
  3. UI
  4. Компоненты

Скрыть/Показать

Для скрытия или показа информации используйте класс 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>