Daftar Isi
Bootstrap 5 adalah salah satu framework CSS paling populer yang digunakan untuk membangun tata letak responsif dan menarik secara visual. Salah satu fitur yang sangat berguna dalam Bootstrap 5 adalah “Collapse”, yang memungkinkan Anda untuk menampilkan dan menyembunyikan konten dengan lancar hanya dengan satu klik. Dalam panduan ini, kami akan menjelaskan secara rinci tentang cara menggunakan Bootstrap 5 Collapse untuk pemula, serta memberikan contoh skrip yang jelas.
Thank you for reading this post, don't forget to subscribe!Apa itu Bootstrap 5 Collapse?
Bootstrap 5 Collapse adalah komponen yang memungkinkan Anda untuk menampilkan atau menyembunyikan konten dengan menekan tombol atau tautan tertentu. Ini berguna untuk mengorganisir konten yang panjang atau untuk menampilkan informasi tambahan dengan cara yang bersih dan efisien.
Cara Menggunakan Bootstrap 5 Collapse
Langkah-langkah berikut akan membantu Anda memahami cara menggunakan Bootstrap 5 Collapse dengan mudah:
1. Persiapkan Struktur HTML: Mulailah dengan membuat struktur dasar HTML Anda. Pastikan Anda telah memasukkan file Bootstrap CSS dan JavaScript yang diperlukan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Collapse</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Konten di sini -->
</body>
</html>
2. Tambahkan Tombol atau Tautan: Tambahkan tombol atau tautan yang akan mengontrol perilaku Collapse.
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Lihat Detail
</button>
3. Definisikan Konten yang Akan Dicollapse: Gunakan elemen <div> untuk menentukan konten yang akan disembunyikan atau ditampilkan.
<div class="collapse" id="collapseExample">
<div class="card card-body">
Konten yang ingin ditampilkan atau disembunyikan.
</div>
</div>
4. Tambahkan JavaScript (opsional): Anda dapat menambahkan JavaScript opsional untuk mengatur perilaku Collapse, meskipun Bootstrap 5 Collapse dapat bekerja tanpa JavaScript tambahan.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
Contoh Lengkap
Berikut adalah contoh lengkap dari penggunaan Bootstrap 5 Collapse:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Collapse</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<h2>Contoh Collapse</h2>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Lihat Detail
</button>
<div class="collapse mt-3" id="collapseExample">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget nisl a felis sollicitudin suscipit. Nulla facilisi.
</div>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Dengan mengikuti langkah-langkah ini, Anda dapat dengan mudah mengimplementasikan Bootstrap 5 Collapse dalam proyek web Anda dan menyediakan pengalaman pengguna yang lebih interaktif.
Kesimpulan
Bootstrap 5 Collapse adalah fitur yang berguna untuk menampilkan dan menyembunyikan konten dengan mudah dalam proyek web Anda. Dengan panduan ini, Anda sekarang memiliki pemahaman yang kuat tentang cara menggunakan Collapse dalam Bootstrap 5.
Originally posted 2024-02-07 21:03:19.
