Bootstrap має плагін, який відповідає за плавне згортання і розгортання блоків. Ця функція вкрай зручна і може використовуватися де завгодно:
- в навігації
- для спойлерів
- для блоків з прихованим текстом
- для згорнутих пунктів меню.
Налаштування
Вам потрібні два об'єкти, де перший буде управляти видимістю другого, а другим може бути посилання або кнопка.
Щоб "вказати" керуючому елементу, який блок потрібно згортати, є два методи:
- атрибут href для посилання
- кнопка або будь-який інший об'єкт з атрибутом data-target.
В обох випадках цей елемент повинен мати атрибут data-toggle="collapse". Другому блоку, який має бути прихованим, потрібно призначити клас .collaps.
Налаштування через data- * атрибути
Додайте атрибути data-toggle="collapse" і data-target керуючому елементу. Атрибут data-target повинен містити CSS-селектор елементу, видимість якого потрібно міняти. Також керованому елементу потрібно призначити клас .collapse.
За замовчуванням такий елемент буде прихованим при завантаженні сторінки. Якщо ви хочете, щоб він був видимим, додайте йому ще клас .in.
Налаштування через javaScript
Якщо data-* атрибути вам не підходять, можна обійтися без них, підключивши "collapse" за допомогою javaScript:
$('.collapse') .collapse()
Методи collapse в Bootstrap.js
| клас | опис |
| .collapse (options) | Ініціалізує приховуваний елемент з параметрами options. У наступній таблиці представлені варіанти параметрів. |
| .collapse ("toggle") | Згортає або розгортає елемент. В залежності від того стану. |
| .collapse ("show") | Розгортає елемент. |
| .collapse ("hide") | Згортає елемент. |
Параметри bootstrap collapse
Параметри, як і ініціалізацію об'єкта, можна передавати за допомогою data-* атрибутів або через JavaScript. У першому випадку ім'я атрибута йде після data-, наприклад, data-parent = "сontainer".
| параметри | тип | за замовчуванням | опис |
| parent | selector | false | Якщо ви передаєте селектор, то все приховувані елементи всередині його будуть приховані при показі батьківського блоку. |
| toggle | boolean | true | Міняти чи видимість елемента при виклику |
Приклад: просте приховування елементів
Це найпростіший приклад роботи скрипта:
При натисканні на кнопку з'являється блок з текстом:
<button class="btn btn-info" data-toggle="collapse" data-target="#hide-me">Простий приклад</button> <div id="hide-me" class="collapse in"> Блок деякого тексту. Блок деякого тексту. Блок деякого тексту. Блок деякого тексту. </div>
Приклад: згортання інших блоків всередині батьківського (accordion)
Щоб автоматично згортати всі інші елементи при показі нового, надайте параметр data-parent="#selector", де #selector може бути ідентифікатором, класом чи будь-яким іншим css-селектором батьківського елементу.
<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"> Блок деякого тексту. Блок деякого тексту. Блок деякого тексту. Блок деякого тексту. </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"> Блок деякого тексту. Блок деякого тексту. Блок деякого тексту. Блок деякого тексту. </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"> Блок деякого тексту. Блок деякого тексту. Блок деякого тексту. Блок деякого тексту. </div> </div> </div> </div>
Наступний урок (Урок №12: Спливаючі та модальні вікна)
