Button List Group menggunakan Collapse Bootstrap

Button List Group dengan Collapse Bootstrap, merupakan gabungan dari 3 komponen yang ada di fitur Framework CSS Bootstrap. yaitu terdiri dari Button, List Group yang di gabungkan kedalam Collapse Bootstrap. Dengan di gabungkan ke 3 fitur ini dapat mempercantik wesite dan menghemat tempat karena menggunakan collapse. Selamat mencoba.

Button List Group dengan Collapse Bootstrap, ini mirip dengan accordion buttonnya dapat di tampilkan maupun di sembunyikan, dan juga dapat di berisi pengumuman, atau juga dapat di tambahkan konten sesuai kebutuhan kita. Untuk membuatnya kita tidak perlu menambahkan CSS tambahan, tetapi sebaiknya di kustomisasi sendiri . Ini membutuhkan  jquery ( jquery-2.1.3.min.js ) . Dan jangan lupa harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.

Button List Group

Langkah pertama kita harus membuat Button List group terlebih dahulu sebelum dimasukkan ke dalam Collapse Bootstrap. Ini sebenarnya merupakan List group Bootstrap yang di tambahkan code href sehingga menjadi sebuah Button List group.

HTML

<div class="container">
 <div class="list-group">
 <a href="#" class="list-group-item">Kaos</a>
 <a href="#" class="list-group-item">Celana</a>
 <a href="#" class="list-group-item">Kemeja</a>
 <a href="#" class="list-group-item ">Rok</a>
  </div>
  
  <div class="list-group">
 <a href="#" class="list-group-item">Facebook</a>
 <a href="#" class="list-group-item">Twitter</a>
 <a href="#" class="list-group-item">Google +</a>
  </div>
  
  <div class="list-group">
 <a href="#" class="list-group-item">F.A.Q</a>
 <a href="#" class="list-group-item">Tentang Kami</a>
  </div>
</div>

Running

 kita membuat 3 buah list group yang nanti akan di masukkan kedalam collapse Bootstrap. 

Collapse Bootstrap

Langkah selanjutnya 3 buah list group tersebut di masukkan ke code collapse bootstrap ,sehingga button list group tersebut berbentuk accordion.

HTML

<div class="container">
 <div style="margin-bottom: 0px" class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
   <div class="panel panel-default">
   <div class="panel-heading" role="tab" id="headingAO">
     <h4 class="panel-title" >
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseAO" aria-expanded="true" aria-controls="collapseAO" >
     Pengumuman
    </a>
     </h4>
   </div>
   <div id="collapseAO" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingAO">
     <div class="panel-body">
    Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman Pengumuman 
     
      </div>
   </div>
    </div>
   
       
    <div class="panel panel-default">
   <div class="panel-heading" role="tab" id="headingOne">
     <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      Kategori
    </a>
     </h4>
   </div>
   <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
     <div class="list-group">
    <a href="#" class="list-group-item">Kaos</a>
    <a href="#" class="list-group-item">Celana</a>
    <a href="#" class="list-group-item">Kemeja</a>
    <a href="#" class="list-group-item ">Rok</a>
     </div>
   </div>
    </div>
    
    <div class="panel panel-default">
   <div class="panel-heading" role="tab" id="headingTwo">
     <h4 class="panel-title">
    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Sosial Media
    </a>
     </h4>
   </div>
   <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
     <div class="list-group">
    <a href="#" class="list-group-item">Facebook</a>
    <a href="#" class="list-group-item">Twitter</a>
    <a href="#" class="list-group-item">Google +</a>
     </div>
   </div>
    </div>
    
    <div class="panel panel-default">
   <div class="panel-heading" role="tab" id="headingFour">
     <h4 class="panel-title">
    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
      Informasi
    </a>
     </h4>
   </div>
   <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
     <div class="list-group">
    <a href="#" class="list-group-item">F.A.Q</a>
    <a href="#" class="list-group-item">Tentang Kami</a>
     </div>
   </div>
    </div>
    
    <div class="panel panel-default">
   <div class="panel-heading" role="tab" >
     <h4 class="panel-title">
    <a href="#" aria-expanded="false" >Kontak</a>
     </h4>
   </div>
    </div>    
  </div>
</div>

pada source code di atas, pertama hanya di buat sebuah panel yang bersisikan pengumuman bukan button, 3 buah selanjutnya adalah list group yang telah di buat sebelumnya, dan yang terakhir hanya button link. jadi terdapat 3 contoh pemanfaatan collapse Bootstrap ini. Khusus untuk pengumuman ditambah class "in" (class="panel-collapse collapse in") maka akan terbuka otomatis ketika di jalankan.

 Demo

Terimakasih telah melihat tutorial saya