accordion sederhana dengan jQuery UI accordion
Ya, sesuai judulnya, artikel ini bergenre tutorial. Tutorial yang akan saya berikan ini soal bagaimana cara membuat accordion seperti sidebar blog ini dengan memakai javascript paling populer sedunia (hehe 
) atau lebih tepatnya jQuery, dan lebih tepatnya lagi jQuery UI Accordion. Artikel ini saya buat atas pertanyaan dari mas widik tentang gimana cara membuat accordion pake jQuery. Karena pertanyaan itu juga saya menganggap mas widik lagi bercanda. Kenapa?? Ya karena beliau (wah..) adalah seorang web designer. Pasti bercanda kan kalo web designer nanya sama saya yang masih newbie ini, hehe 
. Maap juga deh, karena saya bukan programmer dan gak ngerti istilah-istilah pemrograman jadi saya pake istilah sesuka saya aja 
. Oh ya, cara yang saya berikan di bawah buat blog WordPress, jadi kalo mau pasang di web silakan disesuaikan aja.
Untuk membuat jQuery yang dibutuhkan adalah file jQuery itu sendiri dan plugin accordionnya. Download jQuery terbaru di jQuery.com (saya sarankan yang versi kompresi+Gzip). Jangan lupa backup dulu template yang akan dimodifikasi..
- Sertakan file-file jQuery tersebut di bagian <head>
<script src="<?php bloginfo('template_directory'); ?>/jquery-1.2.6.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.accordion.js" type="text/javascript"></script>Keterangan: script di atas cuma buat bikin animasi accordion sederhana seperti di blog ini, untuk menambahkan beberapa efek lain seperti ease slide, bounce slide, dan lain-lain tinggal sertakan aja jquery plugin chilli, easing, dimensions, atau yang lainnya. Caranya sama seperti diatas, tinggal tambahkan dibawahnya aja.
- Masukin lagi script di bawah ini:
<script type="text/javascript"> jQuery().ready(function(){ // simple accordion jQuery('#list1a').accordion(); jQuery('#list1b').accordion({ header: '.titlebar', active: false, alwaysOpen: false, autoheight: false }); // bind to change event of select to control first and seconds accordion // similar to tab's plugin triggerTab(), without an extra method var accordions = jQuery('#list1a, #list1b, #list2, #list3, #navigation, #wizard'); jQuery('#switch select').change(function() { accordions.accordion("activate", this.selectedIndex-1 ); }); jQuery('#close').click(function() { accordions.accordion("activate", -1); }); jQuery('#switch2').change(function() { accordions.accordion("activate", this.value); }); jQuery('#enable').click(function() { accordions.accordion("enable"); }); jQuery('#disable').click(function() { accordions.accordion("disable"); }); jQuery('#remove').click(function() { accordions.accordion("destroy"); wizardButtons.unbind("click"); }); }); </script>Cuma sedikit penjelasan dari no.2
#list1a
Ini cuma ID CSS tanpa efek apapun, lihat kode #list1b di atas. (bingung gak kalo gak lihat demonya langsung??)
#list1b
ID CSS buat bikin accordion pake efek, seperti di bawah ini.
header: ‘.titlebar’,
Class CSS buat nentuin header di tiap accordionnya.
active: false,
Supaya accordion nggak terbuka duluan sebelum diklik untuk pertama kali saat di load.
alwaysOpen: false,
Supaya header gak bisa ditutup sendiri (saat diklik) tanpa membuka header lainnya. Kalau tidak suka ya tinggal dihapus kode tersebut, nanti setiap headernya bisa dibuka tutup gitu deh.
autoheight: false
Seperti di blog ini, ukuran accordionnya menyesuaikan sama kontennya, kalo besar ya ikutan besar, kalo kecil ya ikutan kecil.
Selain yang sudah saya sebutkan di atas masih banyak efek2 yang menarik dari jQuery ini, antara lain animasi easeslide (ease slide, tinggal hover aja tuh kursornya nanti accordion mbuka sendiri), bounceslide (bounce slide, animasi memantul yg lucu bgt), wizard-style (animasi dengan ‘next’ dan ‘previous’), dsb.
Setelah langkah-langkah diatas dicoba, silakan simpan dan refresh browser untuk melihat keajaiban yang terjadi. Lo kok gak ada?? Ya, karena kita belum sampai ke bagian CSS-nya, itu artinya masih setengah jalan :D. - Sekarang waktunya CSS! (apa sih yang susah dari copy-paste??)
/**************** Cool & Simple jQuery Accordion ***************/
#list1b {
float: left;
width: 352px;
margin: 0px 0px 0px;
padding: 0px;
border:1px solid #c5d6ad;
}
.titlebar {
background: #000000;
float: left;
width: 344px;
cursor:pointer;
display:block;
padding-left: 8px;
padding-top: 10px;
padding-bottom: 10px;
margin: 0px;
text-decoration: none;
font-weight: bold;
line-height: 15px;
font-size: 11px;
color: #FFFFFF;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.accordion {
float: left;
width: 352px;
margin: 0px 0px 0px;
padding: 0px;
}
.accordion ul {
margin: 0px;
padding: 5px;
float: left;
width: 342px;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
border-left: 0px solid #000000;
list-style-type: none;
background: #FFFFFF;
}
.accordionulwrap {
float: left;
width: 352px;
}
.accordion ul ul {
margin: 0px;
padding: 0px;
float: left;
width: 320px;
border-width: 0px;
border-style: none;
list-style-type: none;
}
.accordion ul li {
margin: 5px 0px 5px;
padding: 0px;
float: left;
width: 320px;
font-size: 11px;
line-height: 18px;
color: #4d4b4c;
}
.accordion ul li a {
background: url(images/bullet.gif) no-repeat left 2px;
width: 320px;
padding-left: 22px;
display: inline;
padding-top: 3px;
padding-bottom: 3px;
color: #4d4b4c;
text-decoration: none;
}
.accordion ul li a:hover {
background: url(images/bullet.gif) no-repeat left 2px;
width: 320px;
padding-left: 22px;
display: inline;
padding-top: 3px;
padding-bottom: 3px;
color: #FF9900;
text-decoration: underline;
}
.accordion ul ul li {
margin: 5px 0px 0px;
padding: 0px;
float: left;
width: 320px;
font-size: 12px;
line-height: 18px;
color: #4d4b4c;
}Jangan langsung dicopas mentah-mentah ya, tapi harus sesuaikan dulu dengan warna dan ukuran theme yang kamu pake.
- Setelah beres CSS-nya sekarang waktunya bikin accordionmu bekerja. Masukkan ID dan class accordion tadi ke dalam bagian template untuk membuat container, header dan contentnya.
<!-- mulai accordion -->
<div id="list1b">
<!-- bagian konten -->
<div class="accordion">
<div class="titlebar">Judul Header</div>
<div class="accordionulwrap">
<ul>
<!-- ganti text ini dengan tulisan/kode apa aja -->
</ul>
</div>
</div>
<!-- akhir konten -->
</div>
<!-- accordion selesai -->
No. 4 cuma buat accordion dengan satu konten, kalo mau ditambahin tinggal copy aja kode ‘bagian konten’ lagi sebelum div terakhir.
Simpan dan refresh browser. Lihatlah perbuatan yang telah kamu lakukan pada blogmu .
Silakan dicoba ya, jangan pernah menyerah ama accordion yg keren ini, apalagi sampai mau melenyapkan javascript dari muka bumi 
.
If you enjoyed this post, make sure you 
July 7th, 2008 at 1:38 pm
Wah terima kasih mas mau membuat tutorial tentang jQuery UI Accordion. Kebetulan saya baru berkenalan dengan jQuery (memang agak ketinggalan berita hehehe :p).
Selama ini saya menggunakan prototype. Ditunggu tutorial jQuery yang lain.
Salam
July 8th, 2008 at 7:41 am
wagh..theme blog kita sama uey…
tapi udah banyak yang berubah klo aku ikutin blognya mas ini…
mantap uey pengaturan kontent dan penempatan pluginnya…saluutttttt
July 8th, 2008 at 9:23 am
@widik: sama2 mas, saya suka bgt ama jQuery ini
@okta sihotang: makasi ya udah mampir
July 8th, 2008 at 6:21 pm
jQuery buat apa sieh?? aduh kok aq bingung..maklum tahu-nya tinggal pakai ,
coba tak tanya mbah google dulu …makasih mas infonya
July 9th, 2008 at 3:49 pm
@Diah: kalo bingung, liat aja di sidebar blog ini yg bisa dibuka-tutup, nah itu namanya accordion yg dibuat pake jQuery
July 9th, 2008 at 11:05 pm
biar nubie tp huebat..:)
klo sy nubie bgt.. salam kenal..
trims tutornya..:D
July 10th, 2008 at 7:19 am
mas Fanari, yg dimaksud accordion itu yg gimana,..? contoh hasil jadinya yg mana..? menarik nih mas soalnya, jadi tertarik. Trims sebelumnya ya..
July 10th, 2008 at 7:20 am
Pengen ah nyobain di blog, kaya nya bagus neh!
July 10th, 2008 at 8:33 am
@fanari:
Keren abies……
Salute to fanari *100 jempol buat mas fanari*
Klo bisa bikin web e-learning aja mas ttg ajax. hehehehehehe….
July 10th, 2008 at 1:14 pm
Wah manthap postingannya
July 11th, 2008 at 2:56 pm
@Fachia: klo lom tau yg mana accordion itu, liat aja container yg bisa dibuka tutup di sidebar (My Twitter Updates, Tags, Popular Posts, Recent Comments, etc.)
@the gands: hehe, nggak ah mas, udah banyak web yg ngasi pelajaran soal ajax
lagian ini cuma tutorial penggunannya aja kok, jadi semua orang bisa mencobanya
July 13th, 2008 at 8:50 am
mas kalau untuk CMS drupal tahu nggak cara masang JQuery?
July 13th, 2008 at 12:54 pm
@myname: bukannya sok tau, tapi menurut saya hampir sama dengan cara diatas, cuma cara no.1 yg kayaknya harus disesuaikan sendiri. Kalau css nya bisa pakai yg diatas
Maklum saya lom pernah pake drupal sih
August 1st, 2008 at 7:04 pm
mantap mas!! sponsor nya jadi gak begitu kelihatan ya hehehe