Cara Membuat "Accordion" dengan HTML, CSS dan JavaScript

Accordion adalah sebuah alat musik yang dimainkan dengan cara didorong dan ditarik untuk menggerakan udara di dalamnya. Sedangkan dalam konteks web desain,ada juga istilah "accordions menu" atau "collapsible menu".

Istilah yang diterjemah menjadi menu akordeon ini tidak ada hubungannya dengan dunia musik. Namun bentuknya yang menyerupai alat musik tersebut membuatnya lumrah dikenal dengan sebutan "accordion" atau "accordions menu".

Yaitu sebuah elemen interaktif yang digunakan untuk mengatur dan menampilkan konten secara tergulung atau diperluas. Dengan menu ini konten akan tersembunyi secara default namun memungkinkan untuk melihatnya dengan cara klik.

Dan hari ini kita akan membuat menu akordeon tersebut. Seperti biasa kita menggunakan tutorial dari w3schools.com namun saya terapkan pada Blogspot. Silahkan lihat sedikit perbedaan cara penulisannya dengan sumber kode.

Apa itu Accordion?

Menu akordeon terdiri dari judul atau label yang dapat diklik serta area konten terkait yang ditampilkan atau disembunyikan. Biasanya, area konten ini tidak terlihat secara default kecuali setelah pengguna melakukan aksi klik.

Misalnya, ketika pengguna mengklik judul maka bagian konten yang terkait akan diperluas dan ditampilkan dengan animasi yang halus. Pengguna juga dapat menutup bagian tersebut dengan mengklik kembali judulnya.

Sehingga menu akordeon ini sangat berguna ketika ada banyak konten yang perlu ditampilkan dalam ruang yang terbatas. Contoh penerapan accordion yang sering kita lihat misalnya laman FAQ (Frequently Asked Questions).

Untuk lebih jelasnya bisa mengunjungi laman FAQ sebuah website. Dengannya, kita mengetahui kemudahan menavigasi dalam mengakses konten yang diminati tanpa mengganggu tampilan keseluruhan halaman.

Cara Membuat Accordion dengan HTML, CSS dan JavaScript

Cara membuat accordion dalam desain web umumnya melibatkan kombinasi kode antara HTML, CSS, dan JavaScript. Meskipun ada juga yang lebih praktis dengan framework yang menyediakan komponen accordion siap pakai.

Selain itu ada juga yang menggunakan library JavaScript yang mudah dalam penerapannya seperti: jQuery, React.js, Vue.js dan lain-lain. Tentu saja frasa "mudah" yang dimaksud di atas kembali ke pengguna masing-masing.

Adapun pertemuan kita kali ini akan murni menggunakan HTML, CSS dan JavaScript. Namun penerapannya kita coba menggunakan CMS Blogger. Anda tertarik mencobanya? Simak pembahasan berikut tentang accordion menu.

Cara Membuat Accordion pada Template Blogspot

Membuat blog yang menarik dan interaktif adalah salah satu tujuan utama para pemilik blog. Sedangkan cara untuk mencapai hal tersebut salah satunya adalah dengan menggunakan elemen-elemen interaktif, seperti accordion.

Dengan menu akordeon ini pengunjung bisa menyembunyikan atau menampilkan konten dengan mengklik judul atau tombol yang terkait. Hal ini memberikan keleluasaan bagi pengunjung untuk menjelajahi konten secara lebih terperinci sesuai minat mereka.

Dan kabar baiknya, menu akordeon ini bisa kita terapkan pada platform Blogspot. Ya, meskipun sifatnya gratisan, Blogspot bisa menjadi sarana belajar web desain. Berikut ini penjelasan lengkapnya menggunakan HTML, CSS dan JavaScript.

1. Template Dasar Blogspot Sendiri dari Nol

Sebelum menerapkan menu akordeon seperti biasa disarankan menggunakan template dasar sendiri dari nol seperti di bawah ini. Saran selanjutnya, gunakan juga laborotorium kode menggunakan alamat blog dummy.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='utf-8'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='main' showaddelement='yes'/> </body> </html>

2. Menambahkan Kode HTML Accordion

Letakan kode HTML di bawah ini setelah tag <body> atau sebelum tag </body>.

<button class='accordion'>Section 1</button> <div class='panel'> <p>Lorem ipsum...</p> </div> <button class='accordion'>Section 2</button> <div class='panel'> <p>Lorem ipsum...</p> </div> <button class='accordion'>Section 3</button> <div class='panel'> <p>Lorem ipsum...</p> </div>

3. Menambahkan CSS untuk Accordion

Letakan kode CSS di bawah sebelum tag "]]></b:skin>".

/* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; }

4. Menambahkan kode JavaScript

Letakan kode di bawah ini sebelum tag </body>.

Setelah klik "Simpan", menu akordeon akan tampak seperti ini:

Jika kita klik salah satu judul dari menu akordeon tersebut akan tampak seperti ini:

5. Menambahkan CSS untuk Animated Accordion

Menu akordeon yang dihasilkan dengan kode-kode di atas masih terlihat sederhana. Untuk menambahkan animasi, tambahkan kode CSS sebelumnya dengan kode di bawah ini sebelum tag ]]></b:skin>.

.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #777; float: right; margin-left: 5px; } .active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ }

6. Menambahkan Kode JavaScript untuk Animated Accordion

Setelah itu tambahkan kode JavaScript di bawah ini di bawah kode JavaScript sebelumnya atau sebelum tag akhir </body>.

7. Klik "Save".

Langkah terakhir silahkan klik icon "Save" untuk menyimpan perubahan pada template blogspot. Hasil akhir akan terlihat menu akordeon seperti berikut:

Penutup

Pada artikel di atas telah dijelaskan langkah-langkah membuat menu akordeon pada template Blogspot. Dengan mengikuti panduan ini, Anda akan dapat menambahkan fitur accordion sesuai fungsional pada blog Anda.

Sebagaimana telah dijelaskan di atas, menu akordeon ini berguna saat Anda ingin beralih antara menyembunyikan atau menampilkan konten dalam jumlah lebih banyak. Dan halaman FAQ yang sering kita jumpai merupakan contoh nyata penggunaan teknologi yang dibangun dengan accordion ini.

Ada yang masih belum bisa dipahami? Silahkan tuliskan di kolom komentar. Mudah-mudahan dengan pertanyaan yang tidak bisa saya jawab. Sehingga memicu kita kembali belajar lebih jauh tentang HTML, CSS dan JavaScript ini.

Selamat mencoba.