itProger Видеокурсы Изучение технологии Bootstrap (верстка сайта) #11 - Плагин JS Collapse

#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 месяца

Bootstrap

HTML5