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 місяця

Також варто подивитися