Kode script Membuat Menu Faq Accordion menggunakan HTML di postingan blog
sesuai judul artikel, kali ini kita akan membuat sebuah menu accordion dengan menggunakan mode penulisan HTML di postingan blogspot.
Accordion atau menu Faq pertanyaan yang akan dibuat ini merupakan menu sederhana dengan kode script simple.
<ul class='accordion'> <!-- Baris pertama --> <li> <div class='accor-content'> <input class='accor-menu hidden' id='offaccor-menu1' name='accordion-menu' type='radio' /> <label class='accor-title' for='offaccor-menu1'> <i class='accor-icon'></i> <span class='title'>Pertanyaan pertama</span> </label> <div class='content'>Jawaban pertanyaan pertama</div> </div> </li> <!-- Baris kedua --> <li> <div class='accor-content'> <input class='accor-menu hidden' id='offaccor-menu2' name='accordion-menu' type='radio' /> <label class='accor-title' for='offaccor-menu2'> <i class='accor-icon'></i> <span class='title'>Pertanyaan kedua</span> </label> <div class='content'>Jawaban pertanyaan kedua</div> </div> </li> <!-- Baris ketiga --> <li> <div class='accor-content'> <input class='accor-menu hidden' id='offaccor-menu3' name='accordion-menu' type='radio' /> <label class='accor-title' for='offaccor-menu3'> <i class='accor-icon'></i> <span class='title'>Pertanyaan ketiga</span> </label> <div class='content'>Jawaban pertanyaan ketiga</div> </div> </li> <!-- Baris seterusnya... --> ... </ul>
Untuk menambahkan baris baru, salinlah kode diatas dari tag <li> ... </li> dan jangan lupa ubah bagian offaccor-menu1 menjadi offaccor-menu4 dan seterusnya.
Faq Accordian menu sederhana
Contoh hasil akhir dari kode script diatas
Rosul Padri
Baru saja mulai?
- naruto ...