Cara Membuat Accordion Menu Pada Template Median UI

Saifulah.id - Accordion Menu adalah menu yang dapat digunakan untuk menyembunyikan konten yang berisi teks atau gambar. Untuk menampilkan konten yang disembunyikan, kita hanya perlu menekan atau meng-klik judul menu tersebut.

Fungsi Accordion Menu

Ada 3 fungsi khusus yang sering digunakan para blogger dengan Menu Akordion, diantaranya:

1. Saran Pencarian
   Google sendiri menggunakan Accordion Menu untuk memberikan saran Pencarian di mesin penelusurannya.
   
2. Untuk Halaman FAQ
   FAQ (Frequently Asked Question) adalah halaman yang dipakai untuk menampilkan pertanyaan-pertanyaan yang sering ditanyakan oleh pengunjung. Biasanya halaman FAQ membutuhkan Accordion Menu untuk mempersingkat tampilan dan mempermudah pengunjung mencari pertanyaan yang mereka ingin tanyakan tanpa scroll halaman ke bawah terlalu dalam.
   
3. Untuk Halaman Belanja
   Varian produk, Ukuran, dan Deskripsi produk di dalam template belanja bisa menggunakan Accordion Menu untuk mempersingkat tampilan. Supaya pelanggan mudah mencari apa yang mereka butuhkan. Kita tahu sendiri khususnya orang Indonesia, budaya bacanya sangat minim (alias malas baca)

Cara Membuat Accordian Menu Median UI

Template Median UI sebetulnya sudah dilengkapi CSS yang bisa dipanggil agar berfungsi sebagai Accordion Menu. Tapi banyak pemakai Median UI tidak tahu cara penggunaan Acordion Menu di templatenya sendiri. Oleh sebab itu, simak tutorial berikut.

1. Buka Dashboard Blogger
2. Klik + Postingan Baru
3. Tekan icon Pensil 🖋 (Tampilan Menulis)
4. Ubah menjadi Kode < > (Tampilan HTML)
5. Copy-Paste kode HTML berikut ke dalam postingan
   

   <ul class="accordion">

    <li>

    <div class="accorContent">

    <input

    class="accorMenu hidden"

    id="offaccor-menu1"

    name="accordion-menu"

    type="radio"

    />

    <label class="accorTitle" for="offaccor-menu1">

    <i class="accorIcon"></i>

    <span>Judul_1</span>

    </label>

    <div class="content">Paragraf_1</div>

    </div>

    </li>

    <li>

    <div class="accorContent">

    <input

    class="accorMenu hidden"

    id="offaccor-menu2"

    name="accordion-menu"

    type="radio"

    />

    <label class="accorTitle" for="offaccor-menu2">

    <i class="accorIcon"></i>

    <span>Judul_2</span>

    </label>

    <div class="content">Paragraf_2</div>

    </div>

    </li>
6. Ganti teks warna kuning dengan judul.
7. Ganti teks warna biru dengan isi teks / paragraf
8. Jumlah widget accordion yang bisa kamu tambahkan tidak terbatas, cukup salin kode ini dan letakkan di bawahnya.
   

    <label class="accorTitle" for="offaccor-menu2">

    <i class="accorIcon"></i>

    <span>Judul_3</span>

    </label>

    <div class="content">Paragraf_3</div>

    </div>

    </li>
9. Setelah itu tekan Publikasikan

DEMO

• Judul_1

  Paragraf_1
• Judul_2

  Paragraf_2