
#11 - Плагин JS Collapse
В этом уроке мы разберем плагин JS Collapse. Этот плагин позволяет создавать раскрывающиеся блоки (спойлеры). Выглядят они довольно-таки красиво, а их реализация занимает всего пару секунд.
Видеоурок
Исходный код
Раскрывающиеся блоки
<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>
Онлайн редактор кода
Загрузка...
Задание к уроку
Раскрывающийся блок
Вам необходимо сделать кнопку, по нажатию на которую будет раскрываться блок с классом well. В этом блоке может быть какая-либо информация. По умолчанию этот блок открыт. Сделайте также дополнительно, чтобы все это отображалось красиво на различных устройствах.
Посмотреть ответ
Вот решение данной задачи:
<div class="col-lg-3 col-md-4 col-sm-5 col-xs-12">
<br><br>
<button data-toggle="collapse" class="btn btn-warning" data-target="#block">JS Collapse</button>
<br><br>
<div class="collapse in" id="block">
<div class="well">
Какой-либо скрытый текст!
</div>
</div>
</div>
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца