Keraguan Bootstrap 5

Bentuk dasar penutup

Ketika Anda ingin menyembunyikan dan menampilkan banyak konten, komponen yang dapat bergiliran sangat bermanfaat:

Contoh

<button data-bs-toggle="collapse" data-bs-target="#demo">Musim Semi</button>
<div id="demo" class="collapse">
  <p>Hari yang cerah mencari bunga di pinggiran sungai Sihe, pemandangan tak terbatas menjadi baru dalam sekejap mata.</p>
  <p>Baik saja mengenali wajah angin lembut, ribuan warna merah putih selalu musim semi.</p>
</div>

Coba Sendiri

Contoh penjelasan

.collapse Kelas untuk menunjukkan elemen yang dapat bergiliran (dalam contoh kami adalah <div>). Melalui klik tombol, konten yang dapat ditampilkan atau disembunyikan.

Untuk mengawasi (menampilkan/menyembunyikan) konten yang dapat bergiliran, tambahkan data-bs-toggle="collapse" Atribut ditambahkan ke elemen <a> atau <button>. kemudian tambahkan data-bs-target="#id" Atribut untuk menghubungkan tombol dan konten yang dapat bergiliran (<div id="demo">).

Keterangan:Untuk elemen <a>, Anda dapat menggunakan href Atribut untuk menggantikan data-bs-target Atribut:

Contoh

<a href="#demo" data-bs-toggle="collapse">Musim Semi</a>
<div id="demo" class="collapse">
  <p>Hari yang cerah mencari bunga di pinggiran sungai Sihe, pemandangan tak terbatas menjadi baru dalam sekejap mata.</p>
  <p>Baik saja mengenali wajah angin lembut, ribuan warna merah putih selalu musim semi.</p>
</div>

Coba Sendiri

Secara default, konten yang dapat bergiliran disembunyikan. Namun, Anda dapat menambahkan .show Kelas untuk menampilkan konten secara default:

Contoh

<div id="demo" class="collapse show">
  <p>Hari yang cerah mencari bunga di pinggiran sungai Sihe, pemandangan tak terbatas menjadi baru dalam sekejap mata.</p>
  <p>Baik saja mengenali wajah angin lembut, ribuan warna merah putih selalu musim semi.</p>
</div>

Coba Sendiri

Accordion (alat angklung)

Contoh di bawah ini menunjukkan penggunaan ekspansi komponen card untuk menampilkan alat angklung sederhana.

Keterangan:使用 data-bs-parent Atribut memastikan saat salah satu item dapat bergulir ditampilkan, semua elemen yang dapat bergulir di bawah orangtua yang ditentukan akan ditutup.

Contoh

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        Proyek Grup Togel #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>musim semi</h3>
        <p>Hari yang cerah mencari bunga di pinggiran sungai Sihe, pemandangan tak terbatas menjadi baru dalam sekejap mata.</p>
        <p>Baik saja mengenali wajah angin lembut, ribuan warna merah putih selalu musim semi.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        Proyek Grup Togel #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Ulasan Jatuh Musim Panas</h3>
        <p>Manis merah dan biru sudah menjadi serupa dengan serupa, musim panas baru mulai.</p>
        <p>Beberapa daun samping jalan tak terbatas, mulai mengetahui bahwa saya adalah warga zaman damai.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        Proyek Grup Togel #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Pergi ke Gunung</h3>
        <p>Jauh ke gunung, jalur batu menanjak, di tempat di mana awan muncul ada rumah.</p>
        <p>Berhenti untuk menikmati malam kembang pohon jambu, daun es putih merah lebih indah daripada bunga bulan Februari.</p>
      </div>
    </div>
  </div>
</div>

Coba Sendiri