Membuat Accordion di Vue 3 dan Bootstrap 5
Komponen Accordion sangat berguna dan dapat ditemukan di banyak library seperti Bootstrap, Tailwind, Foundation atau yang lainnya. Accordion biasanya di gunakan untuk FAQ Content, Feature Comapartions, atau content yang kompleks tapi bisa di sederhanakan. Untuk kasus kali ini kita akan membuat accordion menggunakan Vue JS 3 dengan Bootstrap 5.
Let’s build it!
Pertama kita buat terlebih dahulu accordion wrapper nya untuk menampung semua kebutuhannya seperti accordion title dan accordion content.
Kemudian kita buat accordion title untuk menampilkan accordion content yang kita sembunyikan. Untuk mempercantik nya kita menggunakan font icon custom. Jika belum tertarik untuk membuat font icon sendiri bisa dilihat di sini.
Setelah menambahkan accordion wrapper dan accordion title kemudian kita akan membuat accordion content.
Struktur accordion sudah mulai selesai, untuk lebih menarik kita tambahkan styling berikut.
Ketika semuanya sudah selesai bagaimana cara implemntasi accordion yang sudah kita buat tadi. Mari kita lihat hasilnya seperti ini
Oke akhirnya pembuatan accordion menggunakan Vue 3 dan Bootstrap 5 sudah selesai. Bisa kalian gunakan untuk FAQ Content atau kebutuhan content lainnya.
Terimakasih