Membuat Accordion Sidebar

Assalamualaikum dan Salam sejahtera buat semua sahabat Sembang Cyber dan juga rakan G+ Sembang Cyber. Hari ni M'Rie nak berkongsikan dengan u all. Macam mana nak buat sidebar menjadi "Accordion Sidebar" dengan cara yang simple dan mudah.

Okay, apa yang u all perlu buat hanyalah copy and paste Java Script di bawah sebelum </head>. Tapi kalau u all tak nak blog u all jadi berat. Paste kan code dibawah sebelum code </body> ataupun </html>. Owh lupa pula. Code ni u all harus paste di ruangan "Edit HTML" template ya, bukan widget.

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

Cara Letak "Click D'Title To View Content".

Okay yang ni pula adalah langkah bagaimana u all nak letakkan arahan untuk "Click D'Title To View Content". Apa yang u all perlu buat adalah mencari code ini di ruangan edit html:

<h2><data:title/></h2>

Tapi kalau u all nak senang. U all cuma perlu cari Title yang u all letak/beri pada widget u all. Contoh kalau u all nak letak pada widget "Popular Post". U all tekan "Ctrl + F" di keyboard laptop/PC dan carilah dengan menggunakan title widget. Dah jumpa title widget tersebut, cari code yang sama seperti diatas dan letakkan code dibawah sebelum code tersebut.

<center>[Click D'Title To View Content]</center>

Perhatian: Ekstra Info.

Tutorial ni hanya valid untuk sidebar yang menggunakan code <h2> sahaja. Ianya tak valid untuk code selain dari <h2>. Jika title widget anda menggunaan code <h1> anda perlu mengubahnya kepada code <h2> terlebih dahulu, selepas itu barulah tutorial ini berfungsi dengan sempurna.
Paparan selepas u all guna tutorial ini bergantung kepada design sidebar u all. Paparan akan berbeza mengikut design template yang u all gunakan.
Konsep Accordion ni sama seperti konsep dropdown ya. Jadi jangan rasa pelik pula bila sidebar jadi dropdown. Hanya widget pertama sahaja yang akan dipaparkan penuh. Manakala widget ke-2 dan seterusnya akan disembunyikan. Jika nak menampilkan isi widget yang tersembunyi tersebut, u all hanya perlu klik title sidebar u all sahaja. Kalau title sidebar u all tiada kotak/border, so memang u all hanya akan nampak teks sahajalah. Jadi kalau nak nampak menarik..u all kenalah ubah suai design widget di sidebar u all tu ya.

Updated Info: 27 Dec 2012

Okay sebelum ni ada yang mengadu dah follow tutor ni tapi tidak menjadikan ?

Sebenarnya aku terlupa bahagian yang paling penting sebenarnya. Kalau diikutkan tutor yang sebetulnya. Ada bahagian yang anda perlu tukar. Terutama yang ditandakan dengan warna merah tu.

Anda perlu ubah code #sidebar-wrapper mengikut code css yang digunakan pada template blog anda tu. Kalau tak tukar, memang tak jadi. Macam blog aku ni, code sidebar memang kebetulan sama dengan code tutor ni. Sebab tu ianya tidak menjadi masalah.

Macam mana nak cari code tu..just pergi dekat bahagian "Edit HTML" dan carilah CSS Code dengan menggunakan keyword "wrapper", lepas dah jumpa. Tengoklah code wrapper untuk sidebar anda tu dan tukar pada code dalam tutor ni.

Source Code: DTE

Pages