Bootstrap - Плагин Collapse

Плагин 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 двумя способами:

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

  $('.collapse').collapse()

Опции Collapse

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

Методы Collapse

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

$('#identifier').collapse({toggle: false})

$('#identifier').collapse('toggle')

$('#identifier').collapse('show')

$('#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.

$('#identifier').on('show.bs.collapse', function () {
   // do something
})

$('#identifier').on('shown.bs.collapse', function () {
   // do something
})

$('#identifier').on('hide.bs.collapse', function () {
   // do something
})

$('#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>

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