Cara Membuat Collabsible Accordion di Bootstrap 4

Collapsible sangat berguna ketika kita ingin menyembunyikan dan menampilkan sebagian dari konten atau teks. Untuk lebih jelasnya, kalian dapat melihat Live Demo melalui tombol berikut:

Lihat Live Demo


<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
     Lorem ipsum dolor text....
</div> 


Penjelasan:
Class .collapse menandakan elemen tersebut adalah Collapsible. Contohnya seperti <div> - yaitu konten yang dapat ditampilkan atau disembunyikan jika tombol di klik.

Untuk mengontrol (menampilkan/menyembunyikan) konten Collapsible, kita dapat menambahkan atribut data-toggle="collapse" kedalam elemen <a> atau <button>. Kemudian, kita juga perlu menambahkan atribut data-target="#id" untuk menghubungkan tombol dengan konten Collapsible (<div id="demo">).

Catatan: Untuk elemen <a>, kalian dapat menggunakan atribut href sebagai pengganti dari atribut data-target. Contoh:

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
     Lorem ipsum dolor text....
</div> 

Lihat kode di Github | Lihat Live Demo

Secara default, konten Collapsible itu tersembunyi. Tetapi kita juga dapat menambahkan class .show untuk menampilkan konten tersebut. Contoh:

<div id="demo" class="collapse show">
    Lorem ipsum dolor text....
</div> 

Lihat kode di Github | Lihat Live Demo

Membuat Accordion di Bootstrap 4

Berikut adalah contoh kode untuk membuat Accordion pada Bootstrap. Perlu diingat bahwa atribut data-parent berguna untuk memastikan semua elemen Collapsible berada di bawah Parent tertentu ketika salah satu item dari Collapsible ditampilkan.

<div id="accordion">
    <div class="card">
        <div class="card-header">
            <a class="card-link" data-toggle="collapse" href="#collapseSatu">
                Item Group Collapsible #1
            </a>
        </div>
        <div id="collapseSatu" class="collapse show" data-parent="#accordion">
            <div class="card-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="card">
        <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseDua">
                Item Group Collapsible #2
            </a>
        </div>
        <div id="collapseDua" class="collapse" data-parent="#accordion">
            <div class="card-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="card">
        <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseTiga">
                Item Group Collapsible #3
            </a>
        </div>
        <div id="collapseTiga" class="collapse" data-parent="#accordion">
            <div class="card-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>

Lihat kode di Github | Lihat Live Demo

Tulis Komentar

0 Komentar