Bootstrap Collapse

Матеріал з Wiki.Zina
Версія від 08:56, 7 червня 2020, створена Romych (обговорення | внесок)
(різн.) ← Попередня версія | Поточна версія (різн.) | Новіша версія → (різн.)
Перейти до навігації Перейти до пошуку

←Bootstrap

JavaScript плагин (bootstrap/js/src/collapse.js) для анимированного скрытия или раскрытия блоков путем изменения высоты блока до нуля и обратно.

<div class="collapse">Скрытый блок</div>
<div class="collapse show">Видимый блок</div>

Чтобы скрыть/показать блок по клику:

<p><a data-toggle="collapse" href="#myBlock">Показать блок</a></p>
<div class="collapse" id="myBlock">Скрытый блок</div>

При нажатии на ссылку JavaScript динамически добавляет к блоку или убирает у него класс .show.

Также во время анимации к блоку добавляется класс .collapsing — и убирается по завершении анимации.

Всего используются 3 класса (прописаны в _transitions.scss):

  • .collapse — блок скрыт
  • .collapsing — в процессе анимации
  • .collapse.show — блок видим