Membuat Collapse Plugin Bootstrap

Sekilas tentang Collapse Plugin Bootstrap

Collapse Plugin memudahkan untuk membuat efek jatuh. Apakah Anda menggunakannya untuk membangun navigasi accordeon atau kotak konten, memungkinkan untuk banyak pilihan konten.
Jika Anda ingin menyertakan fungsi plugin ini secara individual, maka Anda akan perlu yang collapse.js. Ini juga mengharuskan Transisi Plugin untuk dimasukkan dalam Anda versi Bootstrap. Lain, seperti yang disebutkan dalam bab Bootstrap Plugins Ikhtisar, Anda dapat menyertakan bootstrap.js atau bootstrap.min.js

Membuat collaspe plugin Bootstrap

Berikut ini adalah langkah-langkah yang dilakukan membuat collaspe plugin Bootstrap : 

• Untuk membuat collapsible groups atau accordion, kita dapat membuatnya dengan cara :
  

<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 exapand. Click me again to collapse.Section 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Membuat Collapse Plugin Bootstrap. Cara membuat Collapse Plugin Bootstrap. Membuat Collapse Plugin Bootstrap. Cara membuat Collapse Plugin Bootstrap. Membuat Collapse Plugin Bootstrap. Cara membuat Collapse Plugin Bootstrap.
</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 exapand. 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 exapand. Click me again to collapse.Section 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Membuat Collapse Plugin Bootstrap. Cara membuat Collapse Plugin Bootstrap. Membuat Collapse Plugin Bootstrap. Cara membuat Collapse Plugin Bootstrap. Membuat Collapse Plugin Bootstrap. Cara membuat Collapse Plugin Bootstrap.
</div>
</div>
</div>
</div>

• data-toggle="collapse" adalah untuk ditambahkan ke link yang kita klik agar terlihat bagian yang di sembuyikan.
  
• Href atau atribut data-target adalah sebagai komponen parent dan isinya sebagai komponen child.
  
• Atribut data-parent untuk menciptakan animasi efek accordion.
  
• Untuk membuat collapse sederhana tanpa markup accordion, Hal ini dapat dibuat seperti dalam contoh contoh di bawah:
  

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">
Membuat Collapse Plugin Bootstrap. Cara membuat Collapse Plugin Bootstrap. Membuat Collapse Plugin Bootstrap. Cara membuat Collapse Plugin Bootstrap. Membuat Collapse Plugin Bootstrap. Cara membuat Collapse Plugin Bootstrap.
</div>

Seperti yang kita lihat dalam contoh, kita telah menciptakan komponen collapse sederhana, tidak seperti accordion, kita belum menambahkan atribut data induk.