Memahami Efek jQuery Accordion

Blogger Tune-Up telah menerapkan efek accordion pada beberapa artikel yang telah dibuat, diantaranya; Daftar Isi Efek jQuery Accordion dan jQuery Accordion Recent Post with Thumbnail. Bagaimana efek jQuery Accordion ini bekerja? Mari sama-sama diskusikan agar kita bisa lebih memahami dan berkreasi lebih banyak terhadap blog kita. Mudah-mudahan ini merupakan salah satu pancingan untuk para Blogger Indonesia agar mampu berkarya lebih baik dari pada menjadi seorang blogger pengikut atau blogger pengguna fasilitas yang disediakan secara instan tanpa memahami kinerja dari script-script yang dituliskan (copy paste).

Sulit, rumit dan menyita banyak waktu disaat kita belajar tapi seiring waktu semua ini akan bertahap menjadi lebih mudah tanpa terasa. Yang penting kita jangan pernah berfikir bahwa "semua ini sia-sia" karena tingkat profesionalisme blogger kita sebenarnya diuji oleh waktu dan sejauh mana kita mau terus untuk belajar. Mungkin diantara teman blogger ada yang merasa sudah jenuh dengan kegiatan nge-blog atau bahkan ada yang merasa bosan dengan tingkah laku blogger pujaannya yang ternyata sangat sulit membagi ilmunya. Inilah satu diantara fenomena dunia blogging Indonesia yang terjadi disekitar kita, tidak sedikit seorang blogger memuja blogger lainnya yang dianggap sudah profesional tetapi perlahan-lahan apa yang ditulis oleh blogger pujaan kita menjadi tidak informatif dan tidak mendidik bahkan cenderung menyebalkan. Artikel yang hanya membahas tentang program-program affiliasi misalnya atau ada yang lebih kreatif menjadi seorang blogger template converter karena sudah merasa profesional dengan traffic blog yang tinggi dan kemudian memproteksi diri tanpa berbagi ilmunya. Memang itu hak mereka (para blogger profesional), tapi kita sebagai para newbie blogger mau belajar kepada siapa lagi jika mereka menjadi over protective? (Eh kok jadi curhat... Ma'af...)

Mari kembali ke materi efek jQuery Accordion, tetapi disini Blogger Tune-Up tidak akan membahas sampai ke kode CSS-nya, karena materi CSS akan dibahas terpisah.

Skenario Menu HTML

Kita akan membuat suatu sidebar yang berisi link-link menuju suatu alamat, maka kode HTML yang akan kita tulis misalnya seperti dibawah ini:

<div id="menu">
 <div class="judul">Judul 1</div>
 <div class="isimenu">
  <ul>
   <li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
   <li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
   <li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
   <li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
  </ul>
 </div>
 <div class="judul">Judul 2</div>
 <div class="isimenu">
  <ul>
   <li><a href="http://facebook.com/hendriono">Facebook</a></li>
   <li><a href="http://twitter.com/hendriono">Twitter</a></li>
   <li><a href="http://aiotemplate.blogspot.com/">AIO Template</a></li>
   <li><a href="http://programgratisan.blogspot.com/">Freeware</a></li>
   <li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
   <li><a href="http://tutsadobe.blogspot.com/">Design Graphics</a></li>
  </ul>
 </div>
 <div class="judul">Judul 3</div>
 <div class="isimenu">
  <ul>
   <li><a href="http://www.apple.com/">Apple</a></li>
   <li><a href="http://www.nikon.com/">Nikon</a></li>
   <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
   <li><a href="http://www.nintendo.com/">Nintendo</a></li>
  </ul>
 </div>
 <div class="judul">Judul 4</div>
 <div class="isimenu">
  <ul>
   <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
   <li><a href="http://www.google.com/">Google</a></li>
   <li><a href="http://www.ask.com/">Ask.com</a></li>
   <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
  </ul>
 </div>
</div>

Skenarionya begini :

• Pada saat pertama load halaman website maka kumpulan menu pada Judul 1 terbuka dan menu-menu yang ada pada judul berikutnya tertutup.
• Jika kita klik pada Judul 2 maka kumpulan menunya akan terbuka sedangkan menu-menu pada Judul 1 akan tertutup dengan efek slideup/slidedown, dan jika kita klik Judul 3 maka kumpulan menunya akan terbuka sedangkan menu-menu pada Judul 2 akan tertutup sedangkan menu-menu pada Judul 1 dan Judul 4 masih tertutup dan demikian seterusnya.

Memahami Script jQuery Accordion

Setelah memahami skenario bahan menu untuk accordion, mari kita mulai menulis script-nya, seperti dijelaskan dibawah ini:

$('.isimenu').hide();

Script diatas digunakan untuk menyembunyikan seluruh menu yang terdapat diantara tag <div class="isimenu"> dan </div>

$('.isimenu:first').show();

Script diatas digunakan untuk menampilkan menu yang pertama saja, yaitu menu-menu pada Judul 1

$('.judul').css('cursor', 'pointer');

Script diatas digunakan agar pointer mouse berubah menjadi cursor tangan apabila berada pada Judul menu atau yang diapit tag <div class="judul">Judul</div>

$('.judul').click(

Script diatas berfungsi untuk memberikan perintah pada script berikutnya bahwa jika Judul menu diklik maka...

function() {

Script diatas diatas untuk mengaktifkan fungsi klik

if(($(this).next().is('.isimenu')) && ($(this).next().is(':visible')))

Script diatas berfungsi untuk memeriksa bahwa menu-menu (.isimenu) pada Judul tertentu tampak/terbuka

{ return false; }

Script diatas berfungsi untuk mengulang perintah jika bernilai false/salah

if(($(this).next().is('.isimenu')) && (!$(this).next().is(':visible'))) {

Script diatas berfungsi untuk memeriksa bahwa menu-menu (.isimenu) pada Judul tertentu belum tersedia/terbuka jika belum terbuka maka...

$('.isimenu:visible').slideUp('normal');

Script diatas berfungsi untuk membuka menu-menu tertentu dengan efek slideup (bergeser terbuka keatas) dan menutup menu diatasnya

$(this).next().slideDown('normal');

Script diatas berfungsi untuk menggeser/menutup menu lainnya/berikutnya dengan efek slidedown (bergeser menutup kebawah)

return false;

Script diatas berfungsi untuk mengulang perintah jika bernilai false/salah

}
}
);
}
$(document).ready(function() {initMenu();});

Script diatas berfungsi untuk menjalankan fungsi initMenu sebagai perintah-perintah jQuery

Sehingga secara keseluruhan (jika disatukan) efek jQuery Accordion menjadi seperti dibawah ini:

function initMenu() {
$('.isimenu').hide();
$('.isimenu:first').show();
$('.judul').css('cursor', 'pointer');
$('.judul').click(
function() {
 if(($(this).next().is('.isimenu')) && ($(this).next().is(':visible'))) {
   return false;
   }
 if(($(this).next().is('.isimenu')) && (!$(this).next().is(':visible'))) {
   $('.isimenu:visible').slideUp('normal');
   $(this).next().slideDown('normal');
   return false;
   }
 }
);
}
$(document).ready(function() {initMenu();});

Jangan lupa efek jQuery Accordion ini bekerja diatas framework jQuery (Baca disini)

Unduh Efek jQuery AccordionKlik disini untuk mengunduh source code Efek jQuery Accordion

Mudah-mudahan sekarang bisa dimengerti bagaimana efek jQuery Accordion bekerja... Selamat mencoba dan semoga mengerti dan berhasil... Happy Blogging :)