Membuat JQuery Accordion Sidebar

Membuat JQuery Accordion Sidebar, pada kesempatan kali ini saya akan berbagi tutorial buat kawan yang mungkin sedang mencari JQuery accordion sidebar, silahkan kawan masukan kode yang ada dibawah ini kedalam template kawan, namun buat yang belum tau cara peletakan kodenya silahkan baca di Panduan Cara Meletakan Kode pada template, kawan tinggal menyesuaikan saja kode yang ada.

#sidebar-right-1 h2 {
margin: 0 2px;
padding:3px 7px 3px 13px;
  text-shadow:0 1px 0 black;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,#333,#3c3c3c);
  background-image:-moz-linear-gradient(top,#333,#3c3c3c);
  background-image:-ms-linear-gradient(top,#333,#3c3c3c);
  background-image:-o-linear-gradient(top,#333,#3c3c3c);
  background-image:linear-gradient(top,#333,#3c3c3c);
  border-color:#444 transparent #222;
  border-style:solid;
  border-width:1px 0;
font:normal bold 12px 'Trebuchet MS', Trebuchet, sans-serif;
color:#fff;
text-transform:uppercase;
}
#sidebar-right-1 h2:hover {
margin: 0 2px;
padding:3px 7px 3px 13px;
background:#ddaa6e;
font:normal bold 12px 'Trebuchet MS', Trebuchet, sans-serif;
color:#fff;
text-transform:uppercase;
border-bottom:1px solid #404040;
}
#sidebar-right-1 h2.active {
background-color:#000;
color:#00ff00;
  background-image:-webkit-linear-gradient(top,#3c3c3c,#222);
  background-image:-moz-linear-gradient(top,#3c3c3c,#222);
  background-image:-ms-linear-gradient(top,#3c3c3c,#222);
  background-image:-o-linear-gradient(top,#3c3c3c,#222);
  background-image:linear-gradient(top,#3c3c3c,#222);
  box-shadow:0 0 3px black;
  border-color:#555 transparent #222;
  border-style:solid;
  border-width:1px 0;
}
#sidebar-right-1 .widget {
margin:0 0;
padding:0 0;
}
#sidebar-right-1 .widget-content {
padding:5px 5px 5px 13px;
max-height:300px;
overflow:auto;
}
#sidebar-right-1 .widget-content ul li {
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#sidebar-right-1 .widget-content').hide();
    $('#sidebar-right-1 h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-right-1  h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-right-1 h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

yang perlu diperhatikan adalah berada pada ID sidebar, karena ID sidebar kadangberbeda tiap template. kode yang diberi warna merah adalah ID sidebar, dan kebetulan contoh diatas adalah ID sidebar kanan pada template blogger baru. ID sidebar yang lain diantaranya rsidebar-wrapper, sidebar-righ, sidebar-wrapper atau yang lainnya, kawan cocokan saja.

Sampai disini dulu Membuat JQuery Accordion Sidebar,semoga berhasil dan bermanfaat.

Rating: 5 Reviewer: Unknown