Accordion

Accordion digunakan untuk menampilkan konten dalam bentuk yang bisa dibuka atau disembunyikan. Komponen ini membantu menjaga tampilan tetap ringkas dengan hanya menampilkan informasi saat diperlukan.

Penggunaan

Gunakan Accordion untuk menampilkan atau menyembunyikan konten tambahan dengan cara yang ringkas dan efisien. Komponen ini membantu merangkum informasi dalam format yang bisa diperluas untuk menghemat ruang tampilan.

Tujuan Penggunaan

•Mengatur konten atau informasi yang terlalu panjang.
•Menyediakan akses cepat ke informasi tambahan dari satu tempat.
•Membantu pengguna fokus pada bagian konten utama terlebih dahulu.

Anatomi

Varian

Single Accordion

Hanya menampilkan satu panel terbuka dalam satu waktu. Saat panel baru dibuka, panel sebelumnya otomatis tertutup. Ideal untuk halaman dengan banyak bagian informasi agar tampilan tetap ringkas dan mudah dipindai.

State (keadaan)

Collapsed (Tertutup)

Menampilkan hanya bagian judul. Konten disembunyikan untuk menjaga tampilan tetap bersih dan ringkas.

Expanded (Terbuka)

Menampilkan konten lengkap di bawah judul. Ikon panah berputar ke atas untuk menunjukkan bahwa panel sedang terbuka.

Hover

Menampilkan perubahan visual ketika pengguna mengarahkan kursor ke area judul (title) Gunakan untuk memberikan umpan balik visual bahwa elemen dapat diklik atau berinteraksi.