Membuat Widget Accordion Untuk Halaman dan Postingan dengan jQuery

16 February 2021

Halo sobat Blanter, kali ini saya akan membagikan sebuah tutorial sederhana yang dapat digunakan untuk seluruh platform blogger maupun wordpress. Tentu saja sobat sudah tidak asing dengan widget yang satu ini yaitu Accordion yang dapat memunculkan dan menyembunyikan suatu konten tertentu dapat berupa teks, gambar dan lain sebagainya.

Biasanya widget ini digunakan untuk halaman FAQ atau blog Landing page yang berguna untuk menjelaskan suatu pertanyaan dasar dari customer dan saat pertanyaan diklik akan memunculkan jawabannya. Desain yang saya sediakan pada tutorial ini cukup sederhana agar dapat cocok untuk seluruh jenis blog yang sobat gunakan.

Widget ini berguna bagi sobat yang mempunyai blog dengan tema jasa ataupun blog yang membutuhkan konten show hide gambar/video maupun 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:

Lihat Juga: Blanter Landing, Template Landing Page Terbaik untuk Bisnis

Itulah tutorial yang bisa saya bagikan kali ini. Jika ada pertanyaan dan bantuan silahkan isi kolom komentar. Terima kasih.

Dunia Blanter