Bootstrap - Eklentiyi daralt

Daraltma eklentisi, sayfanın daraltılmış bölümlerini oluşturmayı kolaylaştırır. Bir akordiyon gezinme veya içerik kutuları oluşturmak için kullansanız da, birçok içerik seçeneğine izin verir.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, collapse.js. Bu ayrıca Geçiş Eklentisinin Bootstrap sürümünüze dahil edilmesini gerektirir . Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde bahsedildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Daraltma eklentisini kullanabilirsiniz -

To create collapsible groups or accordion. Bu, aşağıdaki örnek örnekte olduğu gibi oluşturulabilir -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" 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 = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" 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 = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" 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" bileşeni genişletmek veya daraltmak için tıkladığınız bağlantıya eklenir.
href veya a data-targetöznitelik, değeri alt bileşenin kimliği olan üst bileşene eklenir .
data-parent Akordeon benzeri efekt oluşturmak için özellik eklenir.

Akordeon işaretlemesi olmadan basit katlanabilir oluşturmak için - Bu, aşağıdaki örnek örnekte olduğu gibi oluşturulabilir -

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

Örnekte görebileceğiniz gibi, akordeonun aksine basit bir daraltılabilir bileşen oluşturduk, özelliğini eklemedik. data-parent.

Kullanım

Aşağıdaki tablo, daraltma eklentisinin ağır yüklerin üstesinden gelmek için kullandığı sınıfları listeler -

Sr.No.	Sınıf ve Açıklama
1	.collapse İçeriği gizler.
2	.collapse.in İçeriği gösterir.
3	.collapsing Geçiş başladığında eklenir ve bittiğinde kaldırılır.

Daraltma eklentisini iki şekilde kullanabilirsiniz -

Via data attributes - Ekle data-toggle = "collapse" ve bir data-targetkatlanabilir bir öğenin denetimini otomatik olarak atamak için öğeye data-targetözellik, daraltmanın uygulanacağı bir CSS seçiciyi kabul eder. Sınıfı eklediğinizden emin olun.collapsekatlanabilir öğeye. Varsayılan olarak açılmasını istiyorsanız, ek sınıfı dahil edin.in.

Daraltılabilir bir kontrole akordeon benzeri grup yönetimi eklemek için data özelliğini ekleyin data-parent = "#selector".
Via JavaScript - Daraltma yöntemi, aşağıda gösterildiği gibi JavaScript ile etkinleştirilebilir -

$('.collapse').collapse()

Seçenekler

Veri öznitelikleri veya JavaScript aracılığıyla geçirilebilecek belirli seçenekler aşağıdaki tabloda listelenmiştir -

Seçenek Adı	Tür / Varsayılan Değer	Veri özelliği adı	Açıklama
ebeveyn	seçici Varsayılan - yanlış	veri-üst	Seçici yanlışsa, belirtilen üst öğe altındaki tüm daraltılabilir öğeler kapatılır (geleneksel akordeon davranışına benzer - bu akordeon grubu sınıfına bağlıdır).
geçiş yapmak	boolean Varsayılanı - doğru	veri geçişi	Çağrıda daraltılabilir öğeyi değiştirir.

Yöntemler

Daraltılabilir öğelerle kullanılan bazı yararlı yöntemlerin bir listesi burada.

Yöntem	Açıklama	Misal
Options - .collapse (seçenekler)	İçeriğinizi katlanabilir bir öğe olarak etkinleştirir. İsteğe bağlı seçenekler nesnesini kabul eder.	`$('#identifier').collapse({ toggle: false })`
Toggle - .collapse ('geçiş')	Daraltılabilir bir öğeyi gösterilecek veya gizlenecek şekilde değiştirir.	`$('#identifier').collapse('toggle')`
Show - .collapse ('göster')	Katlanabilir bir öğeyi gösterir.	`$('#identifier').collapse('show')`
Hide - .collapse ('gizle')	Katlanabilir bir öğeyi gizler.	`$('#identifier').collapse('hide')`

Misal

Aşağıdaki örnek, yöntemlerin kullanımını gösterir -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" 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 = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" 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 = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" 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 = "#accordion" 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 () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

Etkinlikler

Aşağıdaki tablo, daraltma işlevi ile kullanılabilecek birkaç olayı listelemektedir.

Etkinlik	Açıklama	Misal
show.bs.collapse	Gösteri yöntemi çağrıldıktan sonra ateşlendi.	`$('#identifier').on('show.bs.collapse', function () { // do something })`
shown.bs.collapse	Bu olay, bir daraltma öğesi kullanıcıya görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).	`$('#identifier').on('shown.bs.collapse', function () { // do something })`
hide.bs.collapse	Hide örneği yöntemi çağrıldığında tetiklenir.	`$('#identifier').on('hide.bs.collapse', function () { // do something })`
hidden.bs.collapse	Bu olay, bir daraltma öğesi kullanıcıdan gizlendiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).	`$('#identifier').on('hidden.bs.collapse', function () { // do something })`

Misal

Aşağıdaki örnek olayların kullanımını gösterir -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" 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>