#11 - Плагин JS Collapse
За урок мы познакомимся с плагином JS Collapse и изучим использование его на сайтах. Плагин позволяет создавать раскрывающиеся блоки. Выглядят такие блоки красиво, а их реализация занимает всего пару строк кода.
Видеоурок
Вы можете точечно настроить ваш Bootstrap файл, указав все необходимые плагины и расширения через специальный редактор на их официальном сайте. Ссылка на редактор находится .
Исходный код
Раскрывающиеся блоки
<a data-toggle="collapse" href="#hide">JS Collapse</a>
<div class="collapse in" id="hide">
Какой-либо скрытый текст!
</div>
<div class="panel-group" id="collapse-group">
<div class="panel panel-info">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#collapse-group" href="#el1">Первый</a>
</div>
<div id="el1" class="collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#collapse-group" href="#el2">Второй</a>
</div>
<div id="el2" class="collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>Онлайн редактор кода
Загрузка...
Задание к уроку
Раскрывающийся блок
Создайте раскрывающийся блок как на фото ниже:
Посмотреть ответ
Решение задачи:
<div>
<button data-toggle="collapse" class="btn btn-warning" data-target="#block">JS Collapse</button>
<br><br>
<div class="collapse in" id="block">
<div class="jumbotron">
Какой-либо скрытый текст!
</div>
</div>
</div>Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть
