В Bootstrap есть плагин, который отвечает за плавное сворачивание и разворачивание блоков. Эта функция крайне удобна и может использоваться где угодно:

  • в навигации
  • для спойлеров
  • для блоков со скрытым текстом
  • свернутых пунктов меню
  • ответов на часто задаваемые вопросы

Из своего опыта могу сказать, что если ваш проект работает с использованием бутстрапа то collapse вы будете использовать постоянно. Плагин крайне прост в работе, не требует особой настройки и позволяет сворачивать любые блочные элементы. Сейчас я расскажу, как его использовать.

Пример

Для примера я создал кнопку и скрытый текстовый блок. По клику на кнопке блок будет либо показан, либо свернут.

Ссылка

Нострадамус родился в селе Сен-Реми, что во Франции, в семье собственных родителей. Уже в юности пророк мог предсказать наступление следующего дня, погоду на Марсе и прочие интересные вещи. Однако к 1518 году, вконец замучив набожных селян скорыми предсказаниями конца света, был выгнан в Авиньон с целью учебы. Прикинувшись потомком великих людей, быстро получил степень магистра искусств.

Настройка

Вам нужны два объекта, где первый будет управлять видимостью второго. Первым может быть ссылка или кнопка.

Чтобы “указать” управляющему элементу, какой блок нужно сворачивать, есть два метода:

  1. атрибут href для ссылки,
  2. кнопка или любой другой объект с атрибутом data-target.

В обоих случаях этот элемент должен иметь атрибут the data-toggle="collapse". Второму блоку, который должен быть скрыт, нужно назначить класс .collapse.

Настройка через data-* атрибуты

Добавьте атрибуты data-toggle="collapse" и data-target управляющему элементу. Атрибут data-target должен содержать CSS-селектор элемента, видимость которого нужно менять. Также управляемому элементу нужно назначить класс .collapse.

По умолчанию такой элемент будет скрытым при загрузке страницы. Если вы хотите, чтобы он был видимым, добавьте ему дополнительно класс .in.

Настройка через javaScript

Если data-* атрибуты вам не подходят, можно обойтись без них, подключив коллапс при помощи js:

$('.collapse').collapse()

Автоскрытие остальных блоков (accordion)

Чтобы автоматически сворачивать все остальные элементы при показе нового, передайте параметр data-parent="#selector", где #selector может быть идентификатором, классом или любым другим css-селектором родительского элемента. Это удобно для показа ответов на часто задаваемые вопросы. Так, после выбора одного из ответов, все остальные автоматически будут свернуты. Код такого блока вы найдете в примерах ниже.

Методы collapse в Bootstrap.js

МетодОписание
.collapse(options)Инициализирует скрываемый элемент с параметрами options. В следующей таблице представлены варианты параметров.
.collapse("toggle")Сворачивает или разворачивает элемент. Зависит от текущего состояния.
.collapse("show")Разворачивает элемент.
.collapse("hide")Сворачивает элемент.

Параметры bootstrap collapse

Параметры, как и инициализацию объекта, можно передавать при помощи data-* атрибутов или через JavaScript. В первом случае имя атрибута идет после data-, например, data-parent=".container".

ПараметрТипПо умолчаниюОписание
parentselectorfalseЕсли вы передаете селектор, то все скрываемые элементы внутри его будут скрыты при показе родительского блока.
togglebooleantrueМенять ли видимость элемента при вызове

Пример: простое скрытие элементов

Это самый простой пример работы скрипта:

<button class="btn btn-info" data-toggle="collapse" data-target="#hide-me">Collapse Bootstrap.js</button>
<div id="hide-me" class="collapse in">
Анонимус — посетители анонимных борд, которые почти все являются анонимами.
</div>

Обратите внимание: благодаря классу .in сворачиваемый элемент по умолчанию виден.

Анонимус — посетители анонимных борд, которые почти все являются анонимами.

Пример: сворачивание остальных блоков внутри родительского (эффект гармошки или accordion)

<div class="panel-group" id="collapse-group">
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el1">Первый элемент</a>
 </h4>
 </div>
 <div id="el1" class="panel-collapse 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-default">
 <div class="panel-heading">
 <h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el2">Второй элемент</a>
 </h4>
 </div>
 <div id="el2" class="panel-collapse 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 class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el3">Третий элемент</a>
 </h4>
 </div>
 <div id="el3" class="panel-collapse 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>

В этом примере при показе нового блока все остальные, которые находятся в том же родительском блоке, будут свернуты.

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Желаю успехов в изучении!

Отправить ответ

13 Комментарий на "Уроки по Bootstrap. Урок №12: JS collapse, спойлеры, сворачивание блоков"

Уведомлять
avatar
5000
Руслан
Гость

А если есть такая ссылка
<a href="/cat/" rel="nofollow">Анкор</a> – нужно что бы href=”/cat/” обязательно осталось, но при клике не переходило, а развертывало меню. Сейчас происходит одновременно. Заранее спасибо!

Анатолій
Гость

А що зробити, щоб приповторному кліку по вже розгорнутому посиланню, при згортанні текста екран не “зповзав” до рувня цього посилання

seventh
Гость

А подскажите что за беда может быть, если он успешно разворачивается, а назад сворачиваться не хочет при клике по той же ссылке?

Михаил
Гость

на 4м бутстрапе как вложенные уровни реализовать, т.е аккордеон внутри аккордеона. По клику вложенный аккордеон раскрываясь закрывает родительский, увидеть содержимое можно лишь повторно кликнув на родителя.

Дмитрий
Гость

На одном дыхании пробежал все 12 уроков. Шикарно!
Все по делу, коротко, просто и доступно.
Большое спасибо за уроки) И ждем следующих.

Роман
Гость

@Назар Токарь, присоединяюсь. Ждем продолжения

Илья
Гость

А дальнейшие уроки по бутстрапу будут?)

Юлия
Гость

Добрый день!
А подскажите плиз, а как реализовать сдвиг влево-вправо?
спасибо

Stepa
Гость

Неплохо) Жиесом сворачивал, надо теперь отбустрапить, спб)

wpDiscuz