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

hide-show
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно скрывать и показывать контент

Пример

Для того чтобы использовать данный функционал используйте следующую верстку:

Показать 
<div class="sf-hide-show hidden>block block>hidden">
	<a href="javascript:void(0)" class="sf-hide hidden">Скрыть</a>
	<a href="javascript:void(0)" class="sf-show block">Показать</a>
	<div class="hidden">
		Это контент блока который скрывается или показывается.
	</div>
</div>

Скрытое состояние

Показать 
<div class="sf-hide-show">
	<a href="javascript:void(0)" class="sf-hide hidden">Скрыть</a>
	<a href="javascript:void(0)" class="sf-show block">Показать</a>
	<div class="hidden">
		Это контент блока который скрывается или показывается.
	</div>
</div>

Несколько блоков на странице

Вы можете использовать множетсво блоков скрыть/показать на странице. Для каждого может задаваться свой начальный статус показа.

Блок 1

Показать

Блок 2

Показать 
<div class="grid grid-col-2 gap-1">
	<div class="bg-surface-0 p-1">
		<h3 class="m-top-0">Блок 1</h3>
		<div class="sf-hide-show hidden>block block>hidden">
			<a href="javascript:void(0)" class="sf-hide hidden">Скрыть</a>
			<a href="javascript:void(0)" class="sf-show block">Показать</a>
			<div class="hidden">
				Это контент блока который скрывается или показывается.
			</div>
		</div>
	</div>
	<div class="bg-surface-0 p-1">
		<h3 class="m-top-0">Блок 2</h3>
		<div class="sf-hide-show">
			<a href="javascript:void(0)" class="sf-hide hidden">Скрыть</a>
			<a href="javascript:void(0)" class="sf-show block">Показать</a>
			<div class="hidden">
				Это контент блока который скрывается или показывается.
			</div>
		</div>
	</div>
</div>

Адаптивность

Для установки адаптивности блоков, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью