Tahu tidak kawan kursus web design jakarta tentang accordion, Accordion adalah sebuah tampilan yang tersembunyi lalu ketika ingin menampilkannya kita menggunakan sebuah event, biasanya accordion digunakan untuk menampilkan sebuah deskripsi jadi lebih rapih tampilan yang kita punya, bagi teman-teman yang masih bingung apa itu accordion memang paling enak kita langsung lihat contohnya ya, jadi seperti apa cara mudah membuat accordion, simak terus ya teman-teman.

Untuk cara mudah membuat accordion kenapa mudah karena disini saya akan menggunakan dari sebuah framework yaitu bootstrap vue, untuk melihat bagaimana caranya menggunakan accordion di bootstrap vue teman-teman bisa cari di component lalu pilih collapse, oke langsung saja ya teman-teman kursus web design jakarta kita praktek.

Disini kita bisa membuat sebuah accordion atau collapse didalam collapse, jadi ada dua tampilan, keren bukan. Didalam deskripsi ada deskripsi lagi seperti ini hasilnya

cara mudah membuat accordion

Untuk membuat accordion sendiri yang harus teman-teman perhatikan -b-toggle.collapse-1 dan untuk tampilan deskripsinya teman-teman buat sebuah id sesuai dengan nama togglenya id=”collapse-1″ dan biasanya collapse sendiri tampilan awalnya kadang ada yang sudah terbuka, itu teman-teman bisa membuat itu caranya adalah dengan menyisipkan visible di tag collapsenya.

Teman-teman juga bisa membuat atau menampilkan sebuah deskripsi lebih dari satu, yang penting id untuk deskripsi yang lainya itu di cantumkan di button v-b-togglenya, contohnya seperti ini

paham ya dengan kode di atas, teman-teman juga bisa menggabungkannya dengan sebuah card ya, biasanya cara ini yang suka di gunakan ya, caranya mudah tinggal proses accordion tersebut dimasukan atau di kurung oleh cardnya contohnya seperti ini:

maka hasilnya akan seperti ini

cara mudah membuat accordion

langsung tampil ya, seperti yang saya tulis diatas, karena saya menggunakan attribute visible, bagaimana mudah bukan cara mudah membuat accordion, ingat seperti yang tulis diatas yang penting ada v-b-toggle .namacollapse nya apa, dan jangan lupa buat juga id collapsenya, oke saya rasa cukup ya belajar bersama kami kursus web design tentang accordion atau collapse semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

WhatsApp chat