Cara Mudah Membuat Sidebar Accordion Hanya Dengan jQuery

Membuat Sidebar Accordion - sidebar accordion berfungsi untuk merampingkan widget yang terdapat pada sidebar, tidak jarang saya menemukan blog yang mempunyai sidebar yang begitu banyaknya, dengan memasang sidebar accordion ini, tentunya akan mengurangi atau bisa disebut juga merampingkanlah. :p

Pemasangannya tidaklah sulit, disini kita hanya akan menggunakan jQuery saja, jadi simak saja deh. :)

Cara Membuat Sidebar Accordion

1. Ke Template => Edit HTML
2. Silahkan cari kode </head> dan Copy kode dibawah ini dan letakkan tepat di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    // Sembunyikan semua tubuh widget (tutup semua panel)
    $('#sidebar-wrapper .widget-content').hide();
    // Tambahkan class 'active' pada elemen <h2> pertama
    // kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');

    // Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Sembunyikan semua panel yang terbuka dengan efek .slideUp()
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            // Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Terakhir simpan template.

NOTE! Kode yang saya garis bawahi adalah jQuery, jika pada template anda sudah terdapat jQuery, silahkan buang kode tersebut.