https://mediawiki.zina.run/index.php?action=history&feed=atom&title=Bootstrap_CollapseBootstrap Collapse - Історія редагувань2026-10-12T10:00:15ZІсторія редагувань цієї сторінки в вікіMediaWiki 1.44.2https://mediawiki.zina.run/index.php?title=Bootstrap_Collapse&diff=858&oldid=prevRomych в 08:56, 7 червня 20202020-06-07T08:56:25Z<p></p>
<p><b>Нова сторінка</b></p><div>←[[Bootstrap]]<br />
<br />
* [https://getbootstrap.com/docs/4.5/components/collapse/ Официальная документация]<br />
* [https://medium.com/@disjfa/animate-a-open-and-closing-element-using-bootstraps-collapse-79540f641a8e Animate a open and closing element using bootstrap’s collapse.]<br />
<br />
JavaScript плагин (<code>bootstrap/js/src/collapse.js</code>) для анимированного скрытия или раскрытия блоков путем изменения высоты блока до нуля и обратно.<br />
<br />
<source lang="html"><br />
<div class="collapse">Скрытый блок</div><br />
<div class="collapse show">Видимый блок</div><br />
</source><br />
<br />
Чтобы скрыть/показать блок по клику:<br />
<br />
<source lang="html"><br />
<p><a data-toggle="collapse" href="#myBlock">Показать блок</a></p><br />
<div class="collapse" id="myBlock">Скрытый блок</div><br />
</source><br />
<br />
При нажатии на ссылку JavaScript динамически добавляет к блоку или убирает у него класс <code>.show</code>.<br />
<br />
Также во время анимации к блоку добавляется класс <code>.collapsing</code> — и убирается по завершении анимации.<br />
<br />
Всего используются 3 класса (прописаны в <code>_transitions.scss</code>):<br />
<br />
* <code>.collapse</code> — блок скрыт<br />
* <code>.collapsing</code> — в процессе анимации<br />
* <code>.collapse.show</code> — блок видим<br />
<br />
[[Категория: Bootstrap]]<br />
[[Категория:CSS]]<br />
[[Категория:JavaScript]]</div>Romych