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 footer blog ini dengan memakai framework JavaScript paling populer sedunia (hehe :nggaya: ) atau lebih tepatnya jQuery, dengan plugin 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 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 framework 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..
Include
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.
JavaScript Codes
<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 .
Styling
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.
HTML Markup
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 :ketawa: .
Blog ini cuma blog komersil yang dipakai oleh fanari buat nyari duit. Siapa fanari?? Calon "pengangguran" yang (mencoba) sukses dalam bisnis online :). 
{14 Comments so far →}