Cara Cepat dan Mudah Membuat Accordion Menggunakan Bootstrap

Kemarin sudah membahas tentang Bootstrap Collapse, saat ini akan membahas Cara Membuat Accordion Menggunakan Bootstrap, perlu kita beritahukan konsep dari accordion sebenernya sama dengan materi yang dibahas kemarin, hanya saja terdapat tambahan attribute accordion.

Agar lebih mudah dan terlihat lebih jelas dimata kita, disini akan diberikan contoh yang hasilnya dapat anda coba secara langsung dengan menekan menu dibawah ini.

Contoh Accordion

Collapsible Group 1

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.

Collapsible Group 2

Collapsible Group 3

Kode HTML

<div class="panel-group" id="accordion">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
        <a data-parent="#accordion" data-toggle="collapse" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
</div>
<div class="panel-collapse collapse in" id="collapse1">
<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.</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
        <a data-parent="#accordion" data-toggle="collapse" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
</div>
<div class="panel-collapse collapse" id="collapse2">
<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.</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
        <a data-parent="#accordion" data-toggle="collapse" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
</div>
<div class="panel-collapse collapse" id="collapse3">
<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.</div>
</div>
</div>
</div>

dari hasil dan kode diatas perlu kita perhatikan pada elemen <div> dengan attribute #accordion, mengggunakan attribute #accordion mendeskripsikan spesifikasi ketika menu accordion yang lain ditekan maka menu accordion yang terbuka akan otomatis tertutup dengan menggunakan data-parent pada elemen <a> dengan nilai #accordion.