Cara Membuat Sidebar Accordion Dengan Efek JQuery

Cara Membuat Sidebar Accordion Dengan Efek JQuery-  Fungsi dari memasang Sidebar Accordion ini adalah merampingkan blog kita agar blog sidebar blog kita tidak terlalu panjang kebawah.

Dengan adanya ini, blog anda tentunya akan disukai banyak pengunjung, karena mereka melihat betapa rapihnya blog ini, tertata rapih, tidak terlalu panjang kebawah sehingga tidak menimbulkan lag.

Cara Membuat Sidebar Accordion

1. Template => Edit HTML

2. Cari kode </head> cari  menggunakan CTRL + F

3. Jika sudah, Copy kode berikut tepat diatas kode </head>.
Sebelum itu, jikalau di blog kalian belum terpasang kode dibawah ini, maka pasanglah.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Tetapi INGAT ! di dalam 1 Template hanya boleh terdapat 1 Script JQuery saja.

Berikut Kode untuk membuat Sidebar Accordion-nya

<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>

5. Klik Simpan Template.

Kalau ada yang ingin ditanyakan silahkan hubungi admin di :

Facebook : /khaleed.ibnalwaled

Twitter : /AHA_Khalid

Atau hubungi melalui komentar di postingan ini !

Silahkan Kunjungi Artikel yang lain : Membuat Syntax Highlighter

Source : http://www.dte.web.id/2012/02/tip-membuat-sidebar-akordion-pada-blog.html