Bootstrap Accordion

Accordion umumnya digunakan untuk menampilkan beberapa konten yang terlalu panjang, dimasukkan ke dalam suatu barisan yang dapat dilipat / diciutkan sehingga tidak berantakan. Ini biasanya diterapkan juga pada FAQ yang banyak subjudul dengan deskripsi yang panjang, dll.

Setiap pengunjung yang membaca konten tentu dapat menciutkannya atau membukanya untuk membaca isi konten di dalam Accordion tersebut. Jika menggunakan Bootstrap, cara membuat Accordion terbilang mudah. Ikuti langkah-langkahnya di bawah ini.

Membuat Accordion Bootstrap

ads by posciety

Tidak berbeda jauh dengan Collapsible Bootstrap (klik untuk menampilkan / menyembunyikan konten) yang pernah dijelaskan sebelumnya, cara kerja Accordion mirip-mirip seperti itu.

Accordion Bootstrap sendiri merupakan sebuah Panel yang dilengkapi dengan id accordion, judul dari Accordion sendiri merupakan panel title, sedangkan isi / konten adalah panel body, beberapa pengembang juga menggunakan panel footer di dalam Accordion. Berikut ini contoh struktur kode sederhana dalam membuat Accordion Bootstrap:

<h2>Accordion Bootstrap - Posciety</h2>
  <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="#collapse1">Accordion 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Accordion 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Accordion 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Accordion 4</a>
        </h4>
      </div>
      <div id="collapse4" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
      </div>
    </div>
  </div>

Seperti yang terlihat pada kodingan di atas, terdapat 4 Accordion dengan judul Accordion 1, Accordion 2, Accordion 3, dan Accordion 4. Hasilnya akan terlihat seperti ini:

Pastikan untuk menyamakan id yang ada di panel body dengan id yang ada di panel title, seperti contoh di atas adalah collapse1, collapse2, collapse3, dan collapse4. Cara kerjanya adalah: Ketika klik Accordion yang ber-id collapse1 maka akan membuka / menampilkan panel body yang memiliki id collapse1 juga. Maka dari itu, jangan ada id yang sama !

Bagaimana cara mengganti Accordion yang terbuka secara default ?

Pada contoh di atas, Accordion 1 secara default akan otomatis terbuka ketika halaman selesai loading. Ini disebabkan oleh class in pada panel body Accordion 1. Jika tidak ada Accordion yang menggunakan class in, maka tidak ada konten yang terbuka secara default. class in mendefinisikan bahwa Accordion tersebut terbuka secara otomatis. Letakkan class in pada Accordion yang ingin dibuat terbuka secara otomatis.

Simpan dan lihat hasilnya !

Ketika Accordion 1 terbuka kemudian klik Accordion 2 maka Accordion 1 akan tertutup bersamaan dengan terbukanya Accordion 2. Dan begitu seterusnya.