Tuesday, January 1, 2013

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 atas kode ]]></b:skin>

#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;
}

- Selanjutnya Letakkan kode berikut ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<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>

- Simpan Template

//Silahkan anda sesuaikan sendiri
Keterangan:

Kode yang berwarna merah merupakan background pada judul widget.

Kode yang berwarna hijau merupakan ID sidebar.

Kode yang berwarna ungu merupakan jQuery, jika template anda sudah terdapat kode ini, maka tidak usah ditambahkan lagi, atau anda juga bisa mengganti jQuery yang lama dengan yang versi terbaru.

Judul: Membuat Sidebar Accordion dengan jQuery; Ditulis oleh Unknown; Rating Blog: 5 dari 5