Notifications
Mark all as read
Order Completed
Your order #1234 has been completed successfully
5 minutes ago
New Message
You have a new message from John Doe
10 minutes ago
Storage Warning
Your storage is almost full (90% used)
1 hour ago
New User Registered
Sarah Wilson just joined your team
2 hours ago
Payment Failed
Payment for invoice #5678 failed
Yesterday
View all notifications

Accordion

Dokumentasi pembuatan accordion dengan Bootstrap 5
Basic Flush Always Open
Basic Accordion
Satu item terbuka dalam satu waktu

Template dashboard ringan berbasis Bootstrap 5 dengan tema dark/light, komponen, dan contoh halaman siap pakai.

Gunakan tombol toggle di topbar. Preferensi akan disimpan pada localStorage dan disesuaikan di seluruh halaman.

Ya. Ubah CSS variable pada styles/global.css seperti --primary-color atau --bg-color.
HTML
<div class="accordion" id="accBasic">
  <div class="accordion-item">
    <h2 class="accordion-header" id="h1">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#c1" aria-expanded="true">
        Apa itu AdminToolkit?
      </button>
    </h2>
    <div id="c1" class="accordion-collapse collapse show text-black-50" data-bs-parent="#accBasic">
      <div class="accordion-body">...</div>
    </div>
  </div>
  <!-- item lain -->
</div>
Flush Accordion
Tanpa background dan border luar (kelas accordion-flush)

Variasi accordion yang lebih minimalis karena menghapus background dan border wrapper.

Saat accordion berada di dalam container bernuansa card sehingga tampil lebih bersih.
HTML 
<div class="accordion accordion-flush" id="accFlush">
  <div class="accordion-item">
    <h2 class="accordion-header" id="fh1">
      <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#fc1">...</button>
    </h2>
    <div id="fc1" class="accordion-collapse collapse" data-bs-parent="#accFlush">...</div>
  </div>
</div>
Always Open
Beberapa panel bisa terbuka bersamaan (tanpa data-bs-parent)

Konten panel 1.

Konten panel 2.
HTML
<div class="accordion" id="accOpen">
  <div class="accordion-item">
    <h2 class="accordion-header" id="oh1">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#oc1">Panel 1</button>
    </h2>
    <div id="oc1" class="accordion-collapse collapse show text-black-50">...</div>
  </div>
  <!-- tanpa data-bs-parent agar bisa multi open -->
</div>