Membuat Sidebar Accordion dengan jQuery
Setelah kemarin membahas tentang "Membuat Daftar Isi Accordion dengan jQuery", kali ini say akan membahas cara Membuat Sidebar Accordion dengan jQuery. Mungkin ini bisa jadi solusi bagi anda yang mempunyai banyak widget pada blog, karena kalau mempunyai banyak widget tentu template menjadi tinggi, nah dengan tips ini kita bisa meminimalisir hal tersebut. Seperti contoh gambar diatas.
Berikut langkap Membuat Sidebar Accordion dengan jQuery: - Masuk pada bagian Template » Edit HTML
Kemudian Letakkan kode berikut ini bawah kode ]]></b:skin>
<style>- Selanjutnya Letakkan kode berikut ini diatas kode </head>
#sidebar-wrapper h2 {
margin:0 2px;
padding:3px 7px 3px 13px;
text-shadow:0 1px 0 black;
background-color:#AD3000;
border:1px solid #ccc;
font:normal bold 12px "Trebuchet MS",Trebuchet,sans-serif;
color:#fff;
text-transform:uppercase;
}
#sidebar-wrapper h2:hover {
margin:0 2px;
padding:3px 7px 3px 13px;
background:#860000;
font:normal bold 12px "Trebuchet MS",Trebuchet,sans-serif;
color:#fff;
text-transform:uppercase;
border-bottom:1px solid #404040;
}
#sidebar-wrapper h2.active {
background-color:#B60000;
color:#FFF;
}
#sidebar-wrapper .widget {
margin:0 0;
padding:0 0;
}
#sidebar-wrapper .widget-content {
padding:5px 5px 5px 13px;
max-height:auto;
overflow:auto;
}
#sidebar-wrapper1 .widget-content ul li {
border-top:1px solid #444;
border-bottom:1px solid #222;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>- Simpan Template
<script type='text/javascript'>
//<![CDATA[
$(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');
}
});
});
//]]>
</script>
//Silahkan anda sesuaikan sendiri
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.