jQuery : Accordion

Accordion

Salah satu fungsi dari jQuery adalah membuat Accordion menu dimana Accordion menu ini dapat meringkas tampilan dan juga dapat memperindah tampilan web anda. Pada artikel ini saya akan membuat Accordion sederhana yang kita ciptakan disini membutuhkan sedikit fungsi jQuery tanpa plugin. Oke langsung saja yang pertama kita akan membuat daftar list untuk menu yang akan kita buat.

Ketikkan atau copy listing program berikut :

<html>
<head>
<title></title>
</head>
<body>
<ul class="accordion">
<li>Web Master</li>
<ul>
<li><a href="#">HTML CSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">PHP MYSQL</a></li>
</ul>
<li>Web Desaign</li>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Bootsrap</a></li>
</ul>
</body>
</html>

Berikut syntax css sederhananya yang saya buat :

<style>
.accordion {list-style: none; width: 250px; font-family:calibri}
.accordion li {background-color:#0000FF; color;#FFFFFF; font-weight: bold;
margin:1px; cursor: pointer; padding:8px}
.accordion ul{padding:0; display:none}
.accordion ul li {font-weight: normal; cursor: auto;
background-color:#fff; padding:7px;
color:#333}
.accordion a{text-decoration: none}
.accordion a:hover{text-decoration:underline}
</style>


Selanjutnya untuk membuat efek acordionnya tambahkan ini :

<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(e){
$('.accordion>ul').hide();
$(".accordion>li").click(function(){
if(false==$(this).next().is(':visible')){
$('.accordion>ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
});
</script>

Skrip Lengkapnya

<html>
<head>
<title></title>
</head>
<body>
<ul class="accordion">
<li>Web Master</li>
<ul>
<li><a href="#">HTML CSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">PHP MYSQL</a></li>
</ul>
<li>Web Desaign</li>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Bootsrap</a></li>
</ul>
<style>
.accordion {list-style: none; width: 250px; font-family:calibri}
.accordion li {background-color:#0000FF; color;#FFFFFF; font-weight: bold;
margin:1px; cursor: pointer; padding:8px}
.accordion ul{padding:0; display:none}
.accordion ul li {font-weight: normal; cursor: auto;
background-color:#fff; padding:7px;
color:#333}
.accordion a{text-decoration: none}
.accordion a:hover{text-decoration:underline}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(e){
$('.accordion>ul').hide();
$(".accordion>li").click(function(){
if(false==$(this).next().is(':visible')){
$('.accordion>ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
});
</script>
</body>
</html>

Hasilnya :




Coba anda praktekan dan perhatikan, efek saat satu menu di klik, maka submenu nya akan dimunculkan. Sekarang coba jika salah satu menu yang lainnya di klik, maka submenu sebelumnya akan di sembunyikan lagi dan submenu pada menu yang di klik akan muncul.

Nah sekarang giliran kalian untuk mengembangkannya lagi supaya lebih menarik.



Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)

Berlangganan update artikel terbaru via email:

0 Response to "jQuery : Accordion"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel