Membuat Accordion Untuk Blog Dengan CSS, JavaScript dan HTML

Accordion Untuk Blog

Accordion yang dapat memunculkan dan menyembunyikan suatu konten tertentu dapat berupa teks, gambar dan lain sebagainya. yang pasti Kompatible untuk semua Platform

Biasanya widget ini digunakan untuk halaman FAQ atau blog Landing Page yang berguna untuk menjelaskan suatu pertanyaan dasar yang sering tanyakan user dari customer dan saat Pertanyaan diklik akan memunculkan jawabannya.

Untuk menerapkan kedalam Blog yang kalian gunakan, setidaknya kalian sudah tau mana kode CSS dan mana HTML di dalam blog. agar mempermudah melatakan Code tersebut

Cara Pasang'Nya

Copy Terlebih dahulu CSS yang ada pada Syntax di bawah lalu lekatkan pada </b:skin>

/* CSS Accordion Zypo-Code */
.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
}

Lanjut Copy Script yang ada pada Syntax di bawah ini, lalu lekatkan pada </body>, kemudian Simpan

/* JS Accordion Zypo-Code */
<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>

Uji Coba Accordion

1. Buat Halaman/Postingan dalam bentuk Draft
2. Dibagian sudut kiri atas Kalian rubah Tampilan Menulis menjadi Tampilan HTML
3. Kemudian tempelkan kode dibawah ini untuk kalian kreasikan
4. Setelah kalian tempelkan lalu Publikasikan/Draft terserah kalian.

<!--HTML Accordion Zypo-Code-->
<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/AVvXsEgNGtT6zr5ojwBOX8g4pQc7DmpVdWj-ISNP9BZ5GH9H50Gjr7KwtS1k0oZKvybIdMYqiEyPvjsevL7jvZQdN-_f_40DkZKK1U4_NWTR_gYLKXW0_y5G7nE7lsIw_C4vzETjMRfFfSliH3A/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>

Kok Gambar Panah'nya kaga ada ?

Ya iyaa lah kalo blom di pasang Font Awasome (untuk ICON) ya kga bisa, mending kalian Pasang dulu Script'nya. Dengan cara daftar GRATIS di situs'nya langsung