Mecha versi 2.6.4 sudah dirilis!

Membuat Sidebar Akordion dengan jQuery

Tabel Konten
  1. Langkah-Langkah Membuat Sidebar Akordion 
    1. Tidak berhasil? 
  2. Info Tema 
    1. Bleach 

Bagi Anda yang suka menelusuri artikel-artikel potongan kode di sini mungkin pernah sekali dua kali melihat halaman ini » Tambahkan State Aktif untuk jQuery Accordion. Kali ini Saya akan membantu Anda untuk mengerti lebih dalam tentang salah satu manfaat besar dari potongan kode tersebut.

Pernahkan Anda memperhatikan sidebar blog Anda dan menyadari bahwa susunan elemen yang ada pada sidebar tersebut sebenarnya sama persis dengan kerangka akordion yang pernah Anda lihat di halaman tersebut?

Mari kita coba mengambil sudut pandang ini:

Kerangka Sidebar dan Widget pada Tema Blogspot
Kerangka sidebar pada dasarnya bisa kita jadikan sebagai panel-panel akordion.

Setiap sidebar biasanya dibungkus oleh elemen #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>

Jika Anda teliti dengan baik, ternyata model kerangka di atas sama persis dengan kerangka yang ada pada percobaan jQuery akordion yang pernah Saya tuliskan:

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

Itulah kesempatan Anda untuk menjadi kreatif hari ini. Kali ini kita akan menciptakan sidebar dengan efek akordion hanya dengan bermodalkan ide tersebut. Pertama-tama, tentunya harus kita ketahui beberapa elemen yang sama sebagai pemandu dan itu akan kita gunakan untuk memodifikasi potongan kode efek akordion ini:

$(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');
        }
    });
});

Sebagai contoh, elemen #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');
        }
    });
});

Ya, cuma begitu saja modal dasar untuk menciptakan efek akordion pada sidebar. Asalkan kita sudah menemukan ID sidebar yang ingin kita jadikan sebagai target, maka sisanya tinggal melakukan beberapa modifikasi kecil saja.

Langkah-Langkah Membuat Sidebar Akordion 

Pertama-tama masuklah ke halaman editor HTML tema 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'></script><script>
//<![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>

Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut. Sekarang coba simpan tema Anda dan lihat apa yang terjadi pada sidebar blog Anda...

Tidak berhasil? 

Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali tema 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>

Atau Anda juga bisa melihat ID sidebar secara langsung dari halaman blog Anda melalui Add-on Firebug atau aplikasi web developer sejenis lainnya:

Melihat ID Sidebar dengan Firebug
Melihat ID Sidebar dengan Firebug

Nah, Anda bisa mengganti kode #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;
}

Atau cukup sisipkan fungsi jQuery .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');
        }
    });
});

Mengenai fungsi .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;}

Lihat Demo

Info Tema 

Free Blogger Tema

Bleach 

Tema author: NBTemplate
Description: Bleach is a free blogger tema with 3 columns, sidebar on the right and left and exclusive design for Blogger.
Excellent layout for blogs about animals, anime, kids or love.
Download Bleach for free in BTemplates.

58 Komentar

Anonim

sudah berhasil kok mas, cman tampilannya ngga kaya elastis jadi cman slide in/slide out aja. tapi berhasil kok. thank's yah :D

Taufik Nurrohman

@sahadena: Untuk memodifikasi efeknya tinggal memodifikasi kecepatan/tipe efek .slideDown() dan .slideUp() menjadi efek lain. Biasanya Saya akan tetap mempertahankan efek dasar di atas dan hanya memodifikasi pada easingnya seperti di blog Saya :)

Unknown

Emang Mau Di kasi Fitur apa nih Bagian komenX kok kayak ada kode [] kayak di forum2 . . .??

Putra

kok isi widgetnya sebagian jadi hilang mas??
diliat di blog dummy saya (alam-perwria.blogspot.com), entar kalo gak ada masalah baru saya pindah ke blog utama :D

Taufik Nurrohman

@Alam PerwiraBlog tidak Ditemukan T_T

Itulah namanya akordion. Coba kamu klik salah satu judul widget yang isinya hilang.

EM

mungkin maksudnya alam-perwira mas

Putra

@Taufik NurrohmanSory bang salah ketik hehe :D
alam-perwira.blogspot.com
udah, tp malah isi widgetnya kosong T_T

Putra

@Taufik Nurrohman jadi, tp widget yg label isinya malah hilang bang :(
sama widget do you knownya gak ada :(

Unknown

thanks gan, keren banget.. :-)

MUX SPARROW

Ajeb, Gan! :-bd langsung jadi di blog dummy ane.. pojoktauhid.blogspot.com

Tanya, Gan:
(1) Kalo kita mau widget sidebar pertama tampil langsung terbuka, kata Agan tinggal ditambah class 'active' ya?! Nah, ane bingung nih, tampilan kodenya di ane gini:


masang class active-nya gimana ya, Gan?! :p

(2)bisa gak kita pilih yang terbuka pertama bukan widget sidebar yang pertama? misalnya pengen widget yang di tengah yang langsung kebuka.. *sori, ane cerewet ni, Gan.. :D

MUX SPARROW

@MUXLIMO

wah, kodenya gak muncul.. bingung gan gimana nulisnya di komen sini :p

oya satu tanyaan lagi rada out of topic:

Kalau Agan liat, di blog dummy saya itu, saya pake 3 sistem komentar yang dipajang pake semacam tabview {tab komen fesbuk di urutan ke satu. *tutorialnya dapet dari mybloggertricks.com}

tanya:
Agan bisa kasih saran gak, gimana caranya supaya komen blogger yang pertama tampil di tabview komentar itu?

Soale udah ane coba bisa, tapi begitu diklik tab kedua dan ketiga, kotak komentar (fesbuk+disqus)-nya gak muncul.. :'(

Makasih sebelumnnya, Gan.. May Allah Bless you, aamiin. 0:)

Taufik Nurrohman

@MUXLIMO Panel tidak terbuka berdasarkan kelas active, itu cuma sebagai penanda saja untuk kode CSS tambahan. Akordion terbuka pada elemen pertama karena Saya memakai selektor :first. Untuk menampilkan panel pada urutan tertentu bisa menggunakan selektor :eq(n). Tabulasi sidebar pada dasarnya juga mengandalkan selektor tersebut untuk mengontrol pembukaan pertama:

$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2:eq(2)').addClass('active').next().slideDown('slow'); // Buka panel ke 3
$('#sidebar-wrapper h2').click(function() {
if($(this).next().is(':hidden')) {
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});

Pelajari di sini: http://hompimpaalaihumgambreng.blogspot.com/2012/04/selektor-jquery.html B)

Untuk menyisipkan kode HTML harus diparse terlebih dahulu di konverter HTML (cek pada menu Alat & Referensi), setelah itu sisipkan di antara kode <i rel="pre"> ... </i>

Anonim

mas kalo pengen menampilkan entri populer murni dari blogger di menu akordion ini gmana yah caranya??
jadi widget content yang ada di menu akordionnya entri pupuler dari blogger.

raja

berhasil gan sidebar acordionnya... <3
mkasih juga udah meluangkan waktu menghubungi saya di blog rajagaptek..
itu js yang agan kasih di komentar blog saya bisa pake url gambar gak?

Bayu Handono

mas kalo pengen salah satu widget ngga terkena efek accrodion ini gmana caranya? jadi widgetnya slalu terbuka dan ga bisa di tutup.

Anonim

kok punya saya sidebarnya jadi di bwah :'(
coba mas chek di sini
http://cah-depok.blogspot.com/

AZLA

suport, ....... berkunjung untuk silaturahmi
terima kasih

Unknown

Mas Taufik, saya coba dan tidak berhasil accordion, saya mengmati betul bagian postingan yang Anda buat ini, saya menggunakan template buatan MRK yang di posting di ivythemes "DARKRED". Ada beberapa CSS sidebar yang ada pada template, diantaranya :
1. sidebar-wrapper
2. sidebaratas .widget,#sidebarbwh .widget,#sidebartngh
3. sidebartngh .widget
4. sidebartngh
5. sidebartngh h2

Mohon bantuannya bagaimana melakukannya. Terima kasih, saya berlangganan lewat email untuk pertanyyan saya ini. Kiranya Anda membalasnya terima kasih.

#HidupBloggerIndonesia \o/

Taufik Nurrohman

Ngambilnya jangan selektor .widget, tapi .widget-content. Sebagai contoh Saya coba mengubah widget-widget di dalam elemen #sidebarbwh menjadi akordion. Maka seharusnya kodenya kurang lebih akan tampak seperti ini nantinya:

$(function() {
$('#sidebarbwh .widget-content').hide();
$('#sidebarbwh h2:first').addClass('active').next().slideDown('slow');
$('#sidebarbwh h2').css('cursor', 'pointer').click(function() {
if($(this).next().is(':hidden')) {
$('#sidebarbwh h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});

Unknown

Sidebar saya menggunakan fungsi tabbed. Apakah memang berhasil digunakan pada sidebar tabbed Mas?

Saya liat-liat, belum ada blog yang menggunakan accordion dengan sidebar tabbed, Mas.

Mohon bimbingannya Mas.

Artikel-artikel Mas taufik sungguh sangat bermanfaat sama saya. Thanks Mas.

Taufik Nurrohman

Paling tidak butuh dua sidebar yang bertumpukan. Misalnya #sidebar-wrapper-1 dan #sidebar-wrapper-2. Salah satu dijadikan sebagai tabulasi widget, lainnya dijadikan sebagai akordion.

Unknown

mau mau tanya ..
misal awalnya ...

about me..
label
archive

saat dibuka label , trus agar bisa ditutup lagi gimana kang ??

Misterie87

As Salam Kang Taufik, gimana ya caranya mau tutup kesemuanya. Widget hanya akan dipaparkan bila title diklik ? Bisa apa enggak?

Unknown

Supaya bisa menutup kembali bila di klik pada title yang sama kodenya seperti apa mas...

&lt;script type='text/javascript'&gt;
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
$('#accordion h2').toggleClass('active').next().slideup('slow');
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
&lt;/script&gt;

Thankz...

Taufik Nurrohman

Tinggal dihapus kode yang mirip seperti ini:

// Fungsinya untuk membuka panel pertama secara otomatis
$('#accordion h2:first').addClass('active').next().slideDown('slow');

Jadinya nanti hasilnya seperti ini:

$(function() {
$('#accordion .content').hide();
$('#accordion h2').click(function() {
$('#accordion h2').toggleClass('active').next().slideup('slow');
if ($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});

Anonim

ga ngerti sob..
ane udah ane coba praktekin belum bisa untuk nutup balek pas h2 diklik.. :(

thanks :)

Unknown

mass.. biar h2 yg aktif bisa di klik balik bagaimana??? seperti punya mas ini,
ini kode js/jq punya saya..
$(function() {
$('#right-widgets .widget-content').hide();
$('#right-widgets h2').css('cursor', 'pointer').click(function() {
if($(this).next().is(':hidden')) {
$('#right-widgets h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});

dan ini kode yg sudah saya hapus, setelah membaca komentar.. :
$('#right-widgets h2:first').addClass('active').next().slideDown('slow');

petama halaman di buka semua ketutup.. tapi ketika h2 sudah di klik dan isinya tampil, tidak bisa di sembunyikan lagi, kecuali harus klik h2 yg lain baru isi h2 yang pertama atau yg aktif tadi sembunyi lagi.. (jadi tidak bisa mengklik balik h2 yg aktif).. solusi??

Taufik Nurrohman

$(function() {
$('#right-widgets .widget-content').hide();
$('#right-widgets h2').css('cursor', 'pointer').click(function() {
$('#right-widgets h2').removeClass('active').next().slideUp('slow');
if ($(this).next().is(':hidden')) {
$(this).addClass('active').next().slideDown('slow');
} else {
$(this).removeClass('active').next().slideUp('slow');
}
});
});

Unknown

thanks mas sukses,, tapi saya hanya menambahkan kode
} else {
$(this).removeClass('active').next().slideUp(900, "easeInOutExpo");

pada kode jquery saya,,
pake yg mas kasih ga jalan soalnya ga ada $(this).toggleClass .. thanks mas sebelumnya.. :)

Ana Sriwahyuni

terimakasih mas Rohman, sudah saya pasangkan di sidebar bawah dan langsung berhasil <3

EM

untuk menerapkan widget ini pada widget yang telah diseleksi caranya gimana mas?
tanpa perlu membuat sidebar indukan?
saya ingin menggunakannya seperti yang ada pada buzz*blogger*com

mohon dibantu,
terima kasih.

Unknown

Met Malem mas Taufik, saya sudah terapkan di blog percobaan saya dan berhasil.
Dan Masalah yg saya temui dengan Jquery ini adalah ketika saya memasukkan widget gambar tanpa judul di sidebar,biasanya buat pasang 4 kotak iklan mirip punya mas ini,hasilnya adalah widget gambar jadi gak muncul...?
Mungkin karna fungsi h2 yg mengeksekusi sidebar secara keseluruhan.
Niiiaaah...., :D Pertanya anya adalah bagaimana caranya agar bisa mengatur sidebar akordion ini supaya kita bisa custom sendiri mana yang di akordion nin atau tidak..(halah :p bahasaku njelimet :D )
Mohon bantuannya mas..
ohya utk cek TKP ni blog jadi-jabiannya mas ,,,omgondes dotblogspotdotcom

Taufik Nurrohman

Lebih baik tampilkan saja area yang rusak itu secara default. Mungkin masalahnya karena panelnya tertutup. Ganti selektor :first dengan :eq(N), dimana N adalah urutan panel yang ingin ditampilkan pada posisi awal secara default (indeks dimulai dari nol):

$('#sidebar-wrapper h2:eq(2)').addClass('active').next().slideDown("slow");

Anonim

mas kalo nerapin di footer cuma saat width window kurang dari 700 atau berapa terus balik semula lagi kalo di resize lagi gimana

$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize < 700) {
$('#footer .widget-content').hide();
$('#footer h2:first').addClass('active').next().slideDown('slow');
$('#footer  h2').css('cursor', 'pointer').click(function() {
if($(this).next().is(':hidden')) {
$('#footer h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
}
else if (windowSize > 700) {
//saya bingung disini soalnya footernya tetap accordion
}
}
$(window).resize(checkWidth);
});

Taufik Nurrohman

$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize < 700) {
$('#footer .widget-content').hide();
$('#footer h2:first').addClass('active').next().slideDown('slow');
$('#footer  h2').css('cursor', 'pointer').on("click", function() {
if ($(this).next().is(':hidden')) {
$('#footer h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
} else {
$('#footer .widget-content').removeAttr('style').prev().removeClass('active').off("click");
}
} checkWidth();
$(window).on("resize", checkWidth);
});

Unknown

Mas, dimisalkan ada widget(i) yang tidak ingin ikutan dalam parade akordion itu, sehingga ketika widget yang ada dibawahnya diklik maka widget(i) tidak tertutup melainkan masih dalam posisi default (tidak terjadi apa-apa). Caranya gimana ya mas? :'(

Anonim

Thanks for this tutorial. Sangat membantu.
Kalau boleh tanya, slideUp dan slideDown bisa diisi apa saja ya? Karena yang di tutorial adalah slow.

Unknown

Itu pke Jquery easing mas kalo ga salah, hehe :D

Unknown

Jos Gandos Artikelnya, Berhasil Tanpa Problem Sedikit pun. \o/ :-bd

Unknown

Komentar ini telah dihapus oleh pengarang.

Unknown

Mas, Kalau mau nambah efek BOUNCE pada saat sidebar terbuka gimana ya ? Mohon Bantuannya.. :yaya:

Saeful Rahman

Coba pakai ini. :D
$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown(slow, 'easeOutBounce');
$('#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, 'easeOutBounce');
}
});
});

Unknown

kagak bisa. :(

Unknown

mungkin giniii ..

$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown(600, 'easeOutBounce');
$('#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(600, 'easeOutBounce');
}
});
});

Saeful Rahman

bner tuh, saya lupa ganti slow dg angka. Silakan ganti angkanya untuk mengatur kecepatannya. Semakin besar = semakin cepat dan sebaliknya.

Unknown

kok masih tetep ya...jadinya nggak bisa kebuka semua. Bingung ente..

Unknown

Saya pake ini nih .. Coba aja, tinggal ganti efek easingnya
$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
$('#sidebar-wrapper h2').removeClass('active').next().slideUp(900,'easeInOutCubic');
if ($(this).next().is(':hidden')) {
$(this).addClass('active').next().slideDown(600,'easeOutBounce');
} else {
$(this).removeClass('active').next().slideUp(1200,'easeInOutCubic');
}
});
});

Unknown

Komentar ini telah dihapus oleh pengarang.

Komentar telah ditutup.