Dengan jQuery UI kita juga mudah dalam membuat accordion. Berikut kita akan mendemokan bagaimana membuat accordion ini.
Source codenya adalah:
<!DOCTYPE html>
<html>
<head>
<title>Accordian</title>
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”>
</head>
<body>
<div id=”accordionku”>
<h2>
<a href=”#”>Header 1</a>
</h2>
<div>
Ini isi dari header 1 ya. Hanya contoh saja untuk keperluan belajar. Silahkan digunakan sebagai manamestinya
</div>
<h2>
<a href=”#”>Header 2</a>
</h2>
<div>
Ini isi dari header 2 ya. Silahkan digunakan sebagai manamestinya karena untuk belajar saja
</div>
<h2>
<a href=”#”>Header 3</a>
</h2>
<div>
Ini isi dari header 3 ya. Belajar saja. Silahkan digunakan sebagai manamestinya karena untuk belajar saja
</div>
</div><!–end of accordionku–>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.accordion.js”>
</script>
<script>
(function($){
$(“#accordionku”).accordion();
})(jQuery);
</script>
</body>
</html>
Dari coding terlihat seluruh containernya adalah #accordion. Tag h2 dalam container dipakai sebagai header dan div dalam containner dipakai sebagai contennya.
Langkah berikutnya adalah meng-include library yang dibutuhkan yaitu
– development-bundle/jquery-1.6.2.js
– development-bundle/ui/jquery.ui.core.js
– development-bundle/ui/jquery.ui.widget.js
– development-bundle/ui/jquery.ui.accordion.js
Langkah terakhir adalah menjalankan javascript :
(function($){
$(“#accordionku”).accordion();
})(jQuery);
Untuk demonya bisa dilihat di http://aris.proweb.asia/accordion.html dengan tampilan seperti gambar di bawah ini
Untuk penjelasan lebih lanjut mengenai accordion jQuery UI silahkan mengunjungi http://jqueryui.com/demos/accordion/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.