accordion dengan html dan css

accordion hanya dengan html dan css tanpa javascript

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 letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* 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.