Bootstrap - Collapse: Panduan Lengkap untuk Pemula

Hai, para pengembang web yang bersemangat! Hari ini, kita akan mendalami salah satu komponen Bootstrap yang paling berguna: Collapse. Pahamilah itu seperti trick magik untuk halaman web Anda - sekarang Anda melihatnya, sekarang Anda tidak! Mari kita mulai perjalanan menarik ini bersama-sama.

Apa Itu Bootstrap Collapse?

Sebelum kita masuk ke dalam kode, mari kita pahami apa itu Collapse. Bayangkan Anda memiliki artikel panjang di website Anda, tapi Anda tidak ingin membanjiri pengunjung Anda dengan semua teks sekaligus. Itulah tempat Collapse datang ke pertolongan! Itu memungkinkan Anda menyembunyikan dan menampilkan konten dengan klik sederhana, membuat halaman web Anda lebih interaktif dan ramah pengguna.

Contoh Dasar

Mari kita mulai dengan contoh dasar untuk merasakan air.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Klik saya untuk menampilkan rahasia!
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Rahasia adalah... Anda luar biasa karena belajar Bootstrap!
</div>
</div>

mari kitauraikan ini:

1. Kita memiliki tombol (didesain sebagai tautan) yang memicu collapse.
2. Atribut data-bs-toggle="collapse" memberitahu Bootstrap bahwa elemen ini mengontrol area yang dapat disembunyikan.
3. href="#collapseExample" mengarah ke ID konten yang dapat disembunyikan.
4. Konten yang dapat disembunyikan dibungkus dalam div dengan kelas collapse dan ID yang cocok dengan href di tombol.

Ketika Anda mengklik tombol, magik JavaScript Bootstrap terjadi, dan voila! Konten Anda muncul atau hilang.

Collapse Horizontal

Sekarang, mari kita menambahkan rasa baru dengan collapse horizontal. Itu seperti konten Anda bermain hide-and-seek, tapi ke samping!

<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
Ini adalah konten placeholder untuk collapse horizontal. Itu disembunyikan secara default dan ditampilkan saat diperankan.
</div>
</div>
</div>

Perbedaan utama di sini adalah:

1. Kita menggunakan kelas collapse-horizontal bersamaan dengan collapse.
2. Kita menetapkan lebar tertentu pada konten yang dapat disembunyikan.
3. Div eksternal dengan min-height memastikan elemen lain tidak bergeser saat collapse ditogel.

Toggle dan Target Banyak

Sekarang, mari kita buat simfoni elemen collapse! Kita dapat memiliki beberapa tombol mengontrol area collapse yang berbeda (atau yang sama).

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle elemen pertama</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle elemen kedua</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle semua elemen</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Beberapa konten placeholder untuk komponen collapse pertama contoh multi-collapse ini.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Beberapa konten placeholder untuk komponen collapse kedua contoh multi-collapse ini.
</div>
</div>
</div>
</div>

Ini apa yang terjadi:

1. Kita memiliki tiga tombol: dua mengontrol collapse individual, dan satu mengontrol keduanya.
2. Tombol ketiga menggunakan .multi-collapse untuk mengarah ke kedua area collapse.
3. Setiap area collapse memiliki ID unik dan kelas multi-collapse.

Aksesibilitas

Sebagai pengembang yang bertanggung jawab, kita harus memastikan website kita dapat diakses oleh semua orang. Komponen Collapse Bootstrap datang dengan fitur aksesibilitas bawaan, tapi kita dapat memperbaikinya:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#accessibleCollapse" aria-expanded="false" aria-controls="accessibleCollapse">
Tombol Collapse Aksesibel
</button>

<div class="collapse" id="accessibleCollapse">
<div class="card card-body">
Konten ini disembunyikan tapi dapat diakses oleh pembaca layar.
</div>
</div>

Fitur aksesibilitas utama:

1. Atribut aria-expanded memberitahu pembaca layar apakah konten collapse saat ini terlihat.
2. Atribut aria-controls menghubungkan tombol dengan konten collapse.

Tabel Metode

Ini adalah tabel praktis dari metode Collapse yang Anda dapat gunakan dalam JavaScript:

Metode	Deskripsi
collapse('toggle')	Toggles a collapsible element
collapse('show')	Menampilkan elemen collapse
collapse('hide')	Menyembunyikan elemen collapse
collapse('dispose')	Menghapus elemen collapse

Untuk menggunakan metode ini, Anda akan melakukan sesuatu seperti ini:

var myCollapsible = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
toggle: false
})
bsCollapse.show()

Dan itu adalah, teman-teman! Anda telah mengetahui seni Bootstrap Collapse. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba contoh ini. Sebelum Anda tahu, Anda akan membuat halaman web yang dapat lipat dan tutup seperti origami!

Selamat coding, dan may your collapses always be smooth and your toggles always responsive!

Credits: Image by storyset