bergabung di grup telegram kami

accordion dengan html dan css

accordion dengan html dan css

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat accordion hanya dengan html dan css.

mungkin di antara kalian sudah tidak asing lagi dengan yang namanya accordion, accordion ini biasanya di temukan di situs jual beli atau jasa seperti toko online maupun landing page.

accordion ini di pakai untuk keperluan FAQ atau pertanyaan yang sering di ajukan oleh calon client atau pembeli.

atau bisa di pakai untuk menampilkan syarat ketentuan layanan produk atau jasa di situs kalian atau apapun itu sesuai kebutuhan saja.

tutorial sejenis sebenarnya sudah banyak bangat beredar di internet, namun jika kalian belum menemukan style yang cocok dengan situs kalian, maka kalian bisa mencoba yang akan saya bagikan kali ini.

untuk demonya silakan klik tombol di bawah ini, ok buat kalian yang ingin mencobanya mari simak caranya.

Membuat Accordion Dengan Html Dan Css

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin> jika sudah jangan lupa untuk klik simpan.

/* accordion by wendy code */
.hidden{display:none}
.wc-acrdn-str{position:relative;margin:30px 0 0;padding:0; font-size:14px;line-height:1.7em} 
.wc-acrdn-str .wc-acrdn-ktn{width:100%;padding:18px 0;background-color:#f0f0f0;margin-bottom:5px;border-radius:5px;border:1px solid #f0f0f0;box-shadow:0 1px 0 rgb(0 0 0 / 20%),inset 0 0 0 2px #efefef}
.wc-acrdn-str p.acc{display:none;margin:0;padding-left:32px;position:relative;overflow:hidden;max-height:0;-webkit-transition:all .2s ease;transition:all .2s ease; opacity:.8} 
.wc-acrdn-ttl{display:flex;align-items:center;font-weight:900; color:#262d3d;padding:0 5px}
.wc-acrdn-ttl span{display:flex;width:100%}
.wc-acrdn-ttl span:before{content:'\203A';flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px;font-weight:400;font-size:25px;color:inherit;margin-top:-5px}
.wc-acrdn-inp:checked ~ .wc-acrdn-ttl span:before{transform:rotate(90deg);margin-top:5px} .wc-acrdn-inp:checked ~ .wc-acrdn-ttl span{color:#f89000} 
.wc-acrdn-inp:checked ~  p.acc{max-height:100vh;margin:0 10px;display:block}

/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wc-acrdn-str .wc-acrdn-ktn{border:1px solid #4c4f4d;border-bottom-color:#161717;box-shadow:0 1px 0 #161717,inset 0 0 0 2px #4c4f4d;background-color:#4c4f4d}.darkMode .wc-acrdn-ttl{color:#b0b3b8}

Cara Penggunaan

silakan salin kode di bawah ini dan letakkan di mana kalian ingin menampilkn accordionnya bisa di postingan maupun halaman statis.

widget ini menggunakan radio button, jadi hanya bisa membuka 1 baris saja, jika baris kedua di buka maka baris pertama akan otomatis tertutup. jika kalian ingin bisa membuka semua baris silakan ubah type='radio' menjadi type='checkbox'>

di sini juga baris pertama otomatis terbuka, jika kalian ingin tertutup maka hapuslah checked yang saya tandai di baris pertama

<div class='wc-acrdn-str'>  
<!--[ Accordion 1 ]-->
<div class='wc-acrdn-ktn'>
<input class='wc-acrdn-inp hidden' id='acc1' name='accordion' type='radio' checked/>
<label class='wc-acrdn-ttl' for='acc1'>
<span>Accordion 1</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 1 and]-->

<!--[ Accordion 2 ]--> 
<div class='wc-acrdn-ktn'>
<input class='wc-acrdn-inp hidden' id='acc2' name='accordion' type='radio'/>
<label class='wc-acrdn-ttl' for='acc2'>
<span>Accordion 2</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 2 and ]-->
  
<!--[ Accordion 3 ]-->
<div class='wc-acrdn-ktn'>
<input class='wc-acrdn-inp hidden' id='acc3' name='accordion' type='radio'/>
<label class='wc-acrdn-ttl' for='acc3'>
<span>Accordion 3</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 3  and]-->
  
<!--[ Accordion selanjutnya di sini]-->

</div>

jika ingin menambahkan baris baru yang harus anda perhatikan adalah kode id='acc3' dan for='acc3' kode id dan for harus memiliki nilai yang sama dan nilainya tidak boleh sama dengan yang sudah ada.

jadi jika kalian ingin menambahkan baris ke 4 maka penulisannya akan tampak seperti di bawah ini, perhatikan yang saya tandai, kalian cukup ubah acc3 menjadi acc4 lakukan hal yang sama dan seterusnya jika ingin menambahkan baris baru

<!--[ Accordion 4 ]-->
<div class='wc-acrdn-ktn'>
<input class='wc-acrdn-inp hidden' id='acc4' name='accordion' type='radio'/>
<label class='wc-acrdn-ttl' for='acc4'>
<span>Accordion 4</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 4  and]-->

ok jadi sekian cara membuat accordion dengan html dan css yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :
tutorial blogger

8 komentar



image quote pre code
  1. Akhirnya sudah di buatkan ๐Ÿ˜€ Makasih iyo Mas Wenddy ๐Ÿ™
    1. Sama2 ya mas
  2. How to add automatic table of content like median Ui in blogger template
  3. https://i.postimg.cc/L6148QjV/Delete-003.png ubah warna fontnya bagaimana min?
  4. bukan min, ini di template saya cuma ada mode gelap aja, jadi dari code yang admin kasih, saya ubah warna backgroundnya yang sebelumnya putih jadi gelap (color hexnya saya ubah), namun saya tidak bisa ganti warna fontnya, walau #bob3b8 sudah di ubah ke #eeeeee
    1. kalau itu emang tidak di atur agar ikuti warna font template mu, kalau mau custom warna cari class ini lalau beri contoh color:#fff
      .wc-acrdn-str .wc-acrdn-ktn
  5. Yare yare
    Komentar ini telah dihapus oleh administrator blog.
    1. kalau mau kirim kode di komentar gunakam tools komentar di atas agar tidak merusak, jadi komentarmu saya hapus tidak dapat di tampilkan

      penulisan css yg benar di bawah ini

      .wc-acrdn-str .wc-acrdn-ktn{width:100%;padding:18px 0;background-color:#f0f0f0;margin-bottom:5px;border-radius:5px;border:1px solid #f0f0f0;box-shadow:0 1px 0 rgb(0 0 0 / 20%),inset 0 0 0 2px #efefef;color:#f89000}
© 2020 - Wendy Code

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english