Menu accordion dengan jQuery

Pada bahasan sebelumnya, kita telah membuat menu accordion dengan menggunakan html dan css saja.

Kali ini, masih dengan menu accordion, namun sekarang menggunakan bantuan jQuery, sebut saja namanya Menu accordion dengan jQuery.

Baik yang menggunakan css ataupun yang menggunakan jQuery, keduanya sama sama responsive dan menarik.

Simak scriptnya di bawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>Menu acordion dengan jQuery</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <script src="https://my-id.site/editor/js/jquery.min.js"></script>
	
<!-- begin CSS code -->

<style>
body {
	background: #dde;
	font: 14px arial, sans-serif;
}
div {
	padding: 10px;
	font-size: 150%;
	text-align: center;
	text-shadow: 0 1px 0 black;
	font-weight: bold;
	color: green;
}
ul{
	list-style:none;
	margin: 0;
	padding: 0;
}
p {
	background: #0abab5;
	color: #fff;
	display: block;
	margin: 0;
	padding: 12px;
	border-bottom: 1px solid #f5f5f5;
	cursor: pointer;
}
p:hover {
	background: navy; 
	color: yellow;
}
ul li a{
	background: #efefef;
	color: green;
	border-bottom: 1px solid #e1e1e1;
	display: block;
	text-decoration: none;
	padding: 5px;
	padding-left: 10px;
}
a:hover {
	color: red;
}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<div>Menu acordion dengan jQuery</div>

<ul>
		<li>
			<p id="drop1"> Belajar dasar html</p>
				<ul class="drop1" style="display:none;">
					<li><a href="https://my-id.site/persiapan-belajar-html/" target="blank">☆ Persiapan belajar</a></li>
					<li><a href="https://my-id.site/pengenalan-dasar-html/" target="blank">☆ Pengenalan dasar html</a></li>
					<li><a href="https://my-id.site/tutorial-dasar-html/" target="blank">☆ Tutorial dasar html</a></li>
					<li><a href="https://my-id.site/latihan-koding-html/" target="blank">☆ Latihan koding html</a></li>
				</ul>
		</li>
		<li>
			<p id="drop2"> Belajar dasar css</p>
				<ul class="drop2" style="display:none;">
					<li><a href="https://my-id.site/persiapan-belajar-css/" target="blank">☆ Persiapan belajar</a></li>
					<li><a href="https://my-id.site/pengenalan-dasar-css/" target="blank">☆ Pengenalan dasar css</a></li>
					<li><a href="https://my-id.site/tutorial-dasar-css/" target="blank">☆ Tutorial dasar css</a></li>
					<li><a href="https://my-id.site/latihan-koding-css/" target="blank">☆ Latihan koding css</a></li>
				</ul>
		</li>
		<li>
			<p id="drop3"> Belajar membuat website</p>
				<ul class="drop3" style="display:none;">
					<li><a href="https://my-id.site/membuat-website-pertama-dengan-html-dan-css/" target="blank">☆ Website dengan html dan css</a></li>
					<li><a href="https://my-id.site/membuat-website-dengan-togle-menu/" target="blank">☆ Website dengan togle menu</a></li>
					<li><a href="https://my-id.site/membuat-website-dengan-sliding-menu/" target="blank">☆ Website dengan sliding menu</a></li>
				</ul>
		</li>
		<li>
			<p id="drop4"> Contoh koding script</p>
				<ul class="drop4" style="display:none;">
					<li><a href="https://my-id.site/tag/free-script/" target="blank">☆ Arsip: Free script</a></li>
				</ul>
		</li>
		<li>
			<p id="drop5"> Sarana latihan</p>
				<ul class="drop5" style="display:none;">
					<li><a href="https://my-id.site/editor/" target="blank">☆ Online html editor ↗</a></li>
					<li><a href="https://my-id.site/download/" target="blank">☆ Offline - Download</a></li>
				</ul>
		</li>
		<li>
			<p id="drop6"> Informasi umum</p>
				<ul class="drop6" style="display:none;">
					<li><a href="https://my-id.site/tag/free-script/" target="blank">☆ Arsip: Free script</a></li>
				</ul>
		</li>
	</ul>

<!-- Begin JavaScript code -->
  
<script>
$(document).ready(function(){
$("#drop1").click(function(){
	$(".drop1").fadeToggle("fast");
});
$("#drop2").click(function(){
	$(".drop2").fadeToggle("fast");
});
$("#drop3").click(function(){
	$(".drop3").fadeToggle("fast");
});
$("#drop4").click(function(){
	$(".drop4").fadeToggle("fast");
});
$("#drop5").click(function(){
	$(".drop5").fadeToggle("fast");
});
$("#drop6").click(function(){
	$(".drop6").fadeToggle("fast");
});
});
</script>

<!-- End of JavaScript code -->
<!-- End of body content -->

</body>
</html>

Silahkan Anda edit sesuai kebutuhannya, sebagai bahan untuk latihan koding, atau untuk menu pada website Anda.

Seperti biasanya, untuk melihat hasil dan mengedit script diatas secara online, silahkan ke halaman:
Realtime HTML Editor ↗

Sampai disini saja pembahasan tentang Menu accordion dengan jQuery, selamat belajar, dan sukses selalu buat Anda.

Mungkin Anda Menyukai