Mari kita coba mengambil sudut pandang ini:
#sidebar-wrapper dimana di dalamnya terdapat beberapa widget yang selalu terdiri dari elemen <h2> dan elemen tubuh widget itu sendiri seperti ini:<div id='sidebar-wrapper'>
<h2>Blogger templates</h2>
<div class='widget-content'>
....
</div>
<h2>Blogroll</h2>
<div class='widget-content'>
....
</div>
<h2>Labels</h2>
<div class='widget-content'>
....
</div>
</div><div id='accordion'>
<h2>Panel 1</h2>
<div class='content'>
....
</div>
<h2>Panel 2</h2>
<div class='content'>
....
</div>
<h2>Panel 3</h2>
<div class='content'>
....
</div>
</div>$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});#accordion memiliki peran yang sama persis dengan elemen #sidebar-wrapper dan elemen .content juga memiliki peran yang sama dengan elemen .widget-content. Elemen h2 tidak perlu dipertanyakan lagi. Kesimpulannya adalah, untuk menciptakan sidebar akordion setidaknya kita harus memodifikasi kode di atas menjadi seperti ini:$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
$('#sidebar-wrapper h2').click(function() {
if($(this).next().is(':hidden')) {
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});Langkah-Langkah Membuat Sidebar Akordion
Pertama-tama masuklah ke halaman editor HTML template Anda, lalu temukan kode ini:</head>Salin kode di bawah ini dan letakkan 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>Sekarang coba simpan template Anda dan lihat apa yang terjadi pada sidebar blog Anda...
Tidak berhasil?
Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:<div id='sidebar-wrapper-2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
<b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
<b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
</b:section>
</div>
#sidebar-wrapper dengan ID yang Saya beri garis bawah untuk menciptakan efek akordion pada sidebar tersebut.Satu tambahan lagi: Saat Anda mencoba menyentuh judul widget biasanya akan terasa sesuatu yang sedikit mengganjal. Ya, kursornya masih berupa kursor teks. Itu akan membuat elemen pemicu akordion tersebut menjadi tampak sebagai sesuatu yang tidak penting/tidak memiliki sesuatu yang penting (alah!). Kita harus mengubah pointer teksnya menjadi pointer jari telunjuk seperti halnya pointer standar yang selalu muncul pada semua link.
Ada dua cara untuk mengubah pointer teks pada elemen
<h2> menjadi pointer telunjuk. Pertama, dengan cara menuliskannya secara langsung pada kode CSS seperti ini:#sidebar-wrapper h2 {
cursor:pointer;
}.css() di depan selektor yang mengarah kepada elemen h2 seperti ini:$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
$('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
if($(this).next().is(':hidden')) {
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});.addClass('active'), .removeClass('active') dan .toggleClass('active') itu semua hanya untuk menandai panel akordion yang sedang aktif/terbuka. Katakanlah kita ingin membuat elemen <h2> yang sedang aktif berubah warna menjadi merah, maka dalam kode CSS Anda tinggal menambahkan selektor #sidebar-wrapper h2.active dan memberinya warna merah seperti ini:#sidebar-wrapper h2.active {color:red;}demo nya seperti sidebar yang punya saya tapi tapilan nya beda ..........
