Bootstrap - collapse: Panduan Lengkap untuk Pemula

Hai, para pengembang web yang sedang mencari tahu! Hari ini, kita akan melihat salah satu komponen Bootstrap yang sangat berguna: Collapse. Pihakkan seperti ilmu sihir untuk halaman web Anda - sekarang Anda melihatnya, sekarang Anda tidak! Mari kita mulai perjalanan yang menarik ini bersama-sama.

Apa Itu Bootstrap Collapse?

Sebelum kita masuk ke kode, mari pahami apa sebenarnya Collapse. Bayangkan Anda memiliki artikel yang panjang di situs web Anda, tapi Anda tidak ingin membanjiri pengunjung Anda dengan semua teks sekaligus. Itu di mana Collapse datang untuk menyelamatkan! Itu memungkinkan Anda menyembunyikan dan menampilkan konten dengan seklik saja, membuat halaman web Anda lebih interaktif dan user-friendly.

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>

mariuraikan ini:

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

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

Collapse Horizontal

Sekarang, mari kita menambahkan rasa horizontal ke collapse. 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 beberapa konten placeholder untuk collapse horizontal. Ini 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 telah menetapkan lebar tertentu pada konten collapsible.
3. Div luar dengan min-height memastikan elemen lain tidak bergeser saat collapse ditogel.

Multiple Toggles dan Targets

Sekarang, mari kita buat simfoni dari 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>

Itu 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 perlu memastikan situs web kita dapat diakses oleh semua orang. Komponen Collapse Bootstrap datang dengan fitur aksesibilitas bawaan, tapi kita dapat meningkatkannya:

<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 collapsible saat ini terlihat.
2. Atribut aria-controls menghubungkan tombol dengan konten collapsible.

Tabel Metode

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

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

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 saja, teman-teman! Anda telah mengetahui seni Bootstrap Collapse. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba contoh ini. Sebelum Anda tahu, Anda akan membuat halaman web yang bisa lipat dan membuka seperti origami!

Happy coding, dan semoga collapse Anda selalu mulus dan toggle Anda selalu responsif!

Credits: Image by storyset