Плагин Collapse упрощает создание коллапсирующих разделов страницы. Независимо от того, используете ли вы его для создания аккордеонной навигации или содержимого, он позволяет использовать множество опций контента.

Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится collapse.js, после включения bootstrap.js или bootstrap.min.js.

Вы можете использовать плагин collapse -

  • Создавать складные группы или аккордеон. Это можно создать, как в примере ниже -
       <div class = "panel-group" id = "accordion0">
       <div class = "panel panel-default">
         
          <div class = "panel-heading">
             <h4 class = "panel-title">
                <a data-toggle = "collapse" data-parent = "#accordion0" href = "#collapseOne0">
                   Click me to expand. Click me again to collapse.Section 1
                </a>
             </h4>
          </div>
         
          <div id = "collapseOne0" class = "panel-collapse collapse in">
             <div class = "panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
                   nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
             </div>
          </div>
         
       </div>
      
       <div class = "panel panel-default">
          <div class = "panel-heading">
             <h4 class = "panel-title">
                <a data-toggle = "collapse" data-parent = "#accordion0" href = "#collapseTwo0">
                   Click me to expand. Click me again to collapse.Section 2
                </a>
             </h4>
          </div>
     
          <div id = "collapseTwo0" class = "panel-collapse collapse">
             <div class = "panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                   sapiente ea proident. Ad vegan excepteur butcher vice lomo.
             </div>
          </div>
         
       </div>
      
       <div class = "panel panel-default">
          <div class = "panel-heading">
             <h4 class = "panel-title">
                <a data-toggle = "collapse" data-parent = "#accordion0" href = "#collapseThree0">
                   Click me to expand. Click me again to collapse.Section 3
                </a>
             </h4>
          </div>
        
          <div id = "collapseThree0" class = "panel-collapse collapse">
             <div class = "panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                   sapiente ea proident. Ad vegan excepteur butcher vice lomo.
             </div>
          </div>
        
       </div>
    </div>
    
  • Data-toggle = "collapse" добавляется к ссылке, на которую вы нажимаете, чтобы развернуть или свернуть компонент.
  • К родительскому компоненту добавляется атрибут href или атрибут data , значение которого равно id дочернего компонента.
  • Атрибут data-parent добавлен для создания эффекта аккордеона.
  • Создать простой разборный без аккордеонной разметки. Это можно создать, как в примере примера ниже -
    <button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
       simple collapsible
    </button>
     
    <div id = "demo" class = "collapse in">
       Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
          sapiente ea proident. Ad vegan excepteur butcher vice lomo.
    </div>
    

Как вы можете видеть в примере, мы создали простой сборный компонент, в отличие от аккордеона, мы не добавили атрибут data-parent.

Применение Collapse

В следующей таблице перечислены классы, используемые плагином развала для обработки плагина Collapse

Класс Описание
.collapseСкрывает содержимое.
.collapse.inПоказывает содержимое.
.collapsingДобавляется, когда начинается переход, и удаляется, когда он заканчивается.

Вы можете использовать плагин Collapse двумя способами:

  • Через атрибуты данных - добавьте data-toggle = "collapse" и data-target для элемента, чтобы автоматически назначать управление сбрасываемым элементом. Атрибут data-target принимает селектор CSS, чтобы применить коллапс. Не забудьте добавить класс .collapse к сбрасываемому элементу. Если вы хотите открыть его по умолчанию, добавьте дополнительный класс .in. Чтобы добавить гармоничное управление группами в сворачиваемый элемент управления, добавьте данные атрибута data-parent = "#selector".
  • Через JavaScript - метод свернуть можно активировать с помощью JavaScript, как показано ниже -
    $('.collapse').collapse()

Опции Collapse

Существуют определенные опции, которые могут быть переданы через атрибуты данных, или JavaScript перечислены в следующей таблице -

Название опции Тип/значение по умолчанию Имя атрибута данных Описание
parentselector По умолчанию - falsedata-parentЕсли селектор ошибочен, то все сбрасываемые элементы под указанным родителем будут закрыты (подобно традиционному аккордеонному поведению - это зависит от класса группы аккордеона).
toggleboolean Значение по умолчанию - truedata-toggleПереключает сбрасываемый элемент при вызове.

Методы Collapse

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

Метод Описание Пример
Параметры  - .collapse (опции)Активирует ваш контент как складной элемент. Принимает необязательный объект опций.
$('#identifier').collapse({toggle: false})
Toggle  - .collapse ('toggle')Переключает сложенный элемент на показанный или скрытый.
$('#identifier').collapse('toggle')
Show - .collapse ('show')Показывает складной элемент.
$('#identifier').collapse('show')
Hide - .collapse ('hide')Скрывает складной элемент.
$('#identifier').collapse('hide')

Следующий пример демонстрирует использование методов -

<div class = "panel-group" id = "accordion1">
   <div class = "panel panel-default">
     
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseOne1">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
     
      <div id = "collapseOne1" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
  
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseTwo1">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
     
      <div id = "collapseTwo1" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
  
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseThree1">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree1" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
  
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
     
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>
 
<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
 
   $(function () { $('#collapseTwo1').collapse('show')});
   $(function () { $('#collapseThree1').collapse('toggle')});
   $(function () { $('#collapseOne1').collapse('hide')});
</script> 

События Collapse

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

Событие Описание Пример
show.bs.collapseВызывается после вызова метода show.
$('#identifier').on('show.bs.collapse', function () {
   // do something
})
shown.bs.collapseЭто событие запускается, когда элемент сглаживания становится видимым для пользователя (будет ждать завершения CSS-переходов).
$('#identifier').on('shown.bs.collapse', function () {
   // do something
})
hide.bs.collapseВызывается, когда вызван метод экземпляра hide.
$('#identifier').on('hide.bs.collapse', function () {
   // do something
})
hidden.bs.collapseЭто событие запускается, когда элемент сглаживания скрыт от пользователя (будет ждать завершения переходов CSS).
$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

Следующий пример демонстрирует использование событий -

<div class = "panel-group" id = "accordion2">
   <div class = "panel panel-info">
  
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
     
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>
 
<script type = "text/javascript">
   $(function () {
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok