У Bootstrap є плагін, який відповідає за плавне згортання і розгортання блоків. Ця функція вкрай зручна і може використовуватися де завгодно:

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

Зі свого досвіду можу сказати, що якщо ваш проект працює з використанням бутстрапа то collapse ви будете використовувати постійно. Плагін дуже простий в роботі, не вимагає особливої ​​настройки і дозволяє згортати будь-які блокові елементи. Зараз я розповім, як його використовувати.

Приклад

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

Посилання

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

Налаштування

Вам потрібні два об’єкти, де перший буде управляти видимістю другого. Першим може бути посилання або кнопка.

Щоб “вказати” керуючому елементу, який блок потрібно згортати, є два методи:

  1. атрибут href для посилання,
  2. кнопка або будь-який інший об’єкт з атрибутом data-target.

В обох випадках цей елемент повинен мати атрибут 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".

Параметр Тип Default Опис
parent selector false Якщо ви передаєте селектор, то все приховані елементи всередині його будуть приховані при показі батьківського блоку.
toggle boolean true Міняти чи видимість елементу при виклику

Приклад: просте приховування елементів

Це найпростіший приклад роботи скрипта:

<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.

Бажаю успіхів у вивченні!

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
Олександр

Так але там інші функції а обидва варіанта меню основну функцію роблять по data-target-id але воно ж не працює в декількими параметрами..тому і питаю можливо є варіант як розділити цей функціонал або замінити іншим способом виводу..

Олександр

Так. Щоб по кліку розгортались пункти меню по типу як тут https://bootsnipp.com/snippets/featured/vertical-affix-menu-css-only і одночасно зправа відображаль інфа з діва як тут https://bootsnipp.com/snippets/featured/vertical-admin-menu-single-page-jquery#comments

Назар Токар

Так дивіться, на ваших прикладах є весь код у вкладці JS.

Олександр

Назар підкажіть будь-ласка а яким чином можливо змінити цей елемент щоб віб за функционалом був меню з підпінктами яки розгортались і в той самий час вивод інформацію з діва? Якщо використовувати два data-target то воно не працює..Тобто якщо використовувати data-target для розгортання даних з діва та пункти 2го лвл.

Назар Токар

Маєте на увазі, щоб одночасно був відкритий лише один елемент?

True

Почему код приведён без ссылок на bootstrap и прочих вещей, без которых то что вы написали работать не будет? Можно запутаться в версиях bootstrap, jquery. Подключить сильно старые, слишком новые или не совместимые между собой версии(вы писали в комментариях, что JQuery должен быть старее 3.0). Так почему не исключить потенциальную путаницу и не привести полный код html страницы или просто не прикрепить ссылку на GIt репозиторий?

Пакупон спец

Тупо скопировал код, а кнопки не роботают. Сижу через денвер.

Назар Токар

Без jquery.js і bootstrap.js не працюватиме. До того ж Bootstrap вимагає версію jQuery більш ранню, ніж 3.0.

Руслан

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

Анатолій

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

Назар Токар

Використовуйте кнопку замість посилання.

seventh

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

Назар Токар

Перевірте, щоб у об’єкта були всі потрібні класи і атрибути як в прикладі.

Михаил

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

Дмитрий

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

Назар Токарь

@Дмитрий, спасибо, приятно слышать.

Роман

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

Илья

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

Назар Токарь

@Илья, да, я сделаю обзоо всех основных функций фреймворка.

Юлия

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

Stepa

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