Membuat Widget Accordion

Pada kesempatan ini, saya akan berbagi panduan sederhana yang dapat diterapkan di berbagai platform, baik Blogger maupun WordPress. Tentunya, Anda sudah tidak asing dengan widget yang satu ini, yaitu Accordion. Widget ini memungkinkan Anda untuk menampilkan atau menyembunyikan konten tertentu, seperti teks, gambar, dan elemen lainnya.

Widget ini umumnya digunakan pada halaman FAQ atau blog landing page untuk menjawab pertanyaan-pertanyaan dasar dari pelanggan. Ketika sebuah pertanyaan diklik, jawabannya akan muncul secara otomatis. Desain yang saya tawarkan dalam tutorial ini cukup simpel sehingga dapat sesuai dengan berbagai jenis blog yang Anda miliki.

Widget ini sangat bermanfaat bagi Anda yang memiliki blog bertema jasa atau blog yang memerlukan fitur untuk menampilkan dan menyembunyikan konten, seperti gambar, video, atau jenis konten lainnya.

Demo Accordion

Cara Memasang Widget Accordion pada Halaman/Post

Langkah Awal pastikan sobat sudah memiliki hal berikut pada template blognya:

Font Awesome Versi 5
Jquery

Silahkan sobat masuk ke Blogger > Template > Edit HTML

Letakan kode CSS berikut di atas kode ]]></b:skin>

/* CSS Accordion */
.collapse{display:none}#accordion h3{margin:0}.showx .collapse{display:block}
.collapse .card-body{padding:10px 25px 40px;color:#555}
button.btn.btn-link{display:block;background:#fff;border:none;outline:none;width:100%;margin:10px 0;padding:10px 25px;cursor:pointer;text-transform:none;text-align:left}
button.btn.btn-link:before{content:'\f107';font-family:'Font Awesome 5 Free';font-weight:600;font-size:2rem;color:#122949;position:absolute;left:25px;top:15px;opacity:.7;transform:rotate(-90deg);transition:all .3s ease-in-out}
.showx button.btn.btn-link:before{transform:rotate(0deg)}
.card{background:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,0.1);border:1px solid #eee;border-radius:5px;position:relative;overflow:hidden;margin:10px 0;padding:0 0 0 40px}
.card-header button h4{font-weight:400;color:#122949;font-size:1.1rem;margin:0}
#accordion .card-body img{margin:20px auto;border-radius:7px}

Selanjutnya, letakan kode script berikut di atas kode </body>

<script>
//<![CDATA[
// Accordion FAQ
$("#accordion .btn").click(function() {
	var get_target = $(this).attr("data-target");
	$(get_target).slideToggle("fast");
	$(this).parent().parent().toggleClass("showx")
}), 
$(document).ready(function() {
	var get_target;
	"true" == $("#accordion .btn").attr("aria-expanded") && (get_target = $(this).attr("data-target"), $(get_target).slideToggle("fast"))
});
//]]>
</script>

Simpan.

Selanjutnya silahkan sobat masuk ke editor postingan dan ke mode HTML.

Jika sudah, pastikan sobat sudah menandai posisi untuk meletakan kode Accordion pada postingan tersebut.

Berikut adalah kode Accordionnya:

<div id='accordion'>
<!-- CARD START -->
<div class='card showx'>
<div class='card-header' id='heading1'>
<button aria-controls='collapse1' aria-expanded='true' class='btn btn-link' data-target='#collapse1' data-toggle='collapse'><h4>What is Blogger?</h4></button>
</div>
<div aria-labelledby='heading1' class='collapse' data-parent='#accordion' id='collapse1'>
<div class='card-body'>Blogger is an American blog-publishing service that allows multi-user blogs with time-stamped entries. It was developed by Pyra Labs, which was bought by Google in 2003. The blogs are hosted by Google and generally accessed from a subdomain of blogspot.com. Blogs can also be served from a custom domain owned by the user (like www.example.com) by using DNS facilities to direct a domain to Google's servers.</div>
</div>
</div>
<!-- CARD END -->
<!-- CARD START -->
<div class='card'>
<div class='card-header' id='heading2'>
<button aria-controls='collapse2' aria-expanded='true' class='btn btn-link' data-target='#collapse2' data-toggle='collapse'><h4>This product have a guarantee?</h4></button>
</div>
<div aria-labelledby='heading2' class='collapse' data-parent='#accordion' id='collapse2'>
<div class='card-body'>In hac habitasse platea dictumst. Vivamus eget elementum nibh. Mauris ultrices, arcu et sollicitudin volutpat, massa nisl aliquet leo, non ornare nulla libero in metus. Integer et enim a lacus convallis dapibus.<center><img alt="Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAHiWorgNq2dKuzZxMYmvnQ4ypG40STRf4o1H33A-HmzcFh8lbgTqIontUKd6WIWce7pkKfBI2nxHI6ZKoARwDDroSBFXycN2wQRgi_s3bUdFXmeuikFR4c-aCOsdreMhVV23Icjb8QI/s400/material+design+ui.png"/></center></div>
</div>
</div>
<!-- CARD END -->
<!-- CARD START -->
<div class='card'>
<div class='card-header' id='heading3'>
<button aria-controls='collapse3' aria-expanded='true' class='btn btn-link' data-target='#collapse3' data-toggle='collapse'><h4>How about the Documentation?</h4></button>
</div>
<div aria-labelledby='heading3' class='collapse' data-parent='#accordion' id='collapse3'>
<div class='card-body'>Maecenas pulvinar tincidunt ex. Sed ullamcorper suscipit nisi a semper. Ut sed egestas leo. Quisque at ex magna. Sed mollis faucibus mollis. Nunc sed aliquet lectus. Aenean massa neque, iaculis a augue nec, pretium mattis massa.</div>
</div>
</div>
<!-- CARD END -->
</div>

Sudah saya tandakan bagian-bagiannya dengan  untuk awalan dan  untuk akhir.

Jika ingin menambah kotak, pastikan sobat merubah angka pada card tersebut: