Bootstrap

Изучение технологии Bootstrap (верстка сайта)

16 уроков 20 заданий Справочник Компилятор

#11 - Плагин JS Collapse

#11 - Плагин JS Collapse


BootstrapHTML5

В этом уроке мы разберем плагин JS Collapse. Этот плагин позволяет создавать раскрывающиеся блоки (спойлеры). Выглядят они довольно-таки красиво, а их реализация занимает всего пару секунд.

Видео урок:

Скачивание Bootstrap (можно выбрать плагин 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 месяца!


BootstrapHTML5

Также стоит посмотреть