Codepelajar – Secara sederhana, accordion adalah elemen interaktif yang memungkinkan pengunjung website mengakses konten lebih lanjut dengan mengklik judul atau ikon yang terkait. Ketika judul tersebut diklik, bagian isi yang tersembunyi akan ditampilkan dengan efek animasi yang halus, biasanya dengan efek kebukaan vertikal. Dengan menggunakan accordion, Anda dapat menyajikan informasi dalam tampilan terstruktur yang tidak membutuhkan banyak ruang dan memungkinkan pengguna untuk mengeksplore konten secara selektif.
Cara Membuat Accordion Dengan HTML dan CSS
Buka Blogspot tema > edit html salin CSS di bawah ini dan tempel di atas kode ]]></b:skin> atau di atas kode </style>
/* accordion by codepelajar */
.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}
Jika sudah maka salin kode dibawah ini dan tempatkan pada menu widget atau postingan Anda
<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>
Widget ini juga menggunakan radio button dimana jika Anda membuka baris kedua maka secara otomatis baris pertama akan menutup, jika ingin membuka semua baris silahkan ganti kode type=’radio’ menjadi type=’checkbox’>
Jika ingin menambah baris ke 4 maka tambahkan kode dibawah ini di tempat yang sudah saya tandai di kode sebelumnya, yaitu dibawah baris 3
<!--[ 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]-->
Oke mungkin cuman itu yang dapat Codepelajar sampaikan, terimakasih sudah berkunjung dan semoga hal ini bermanfaat.
