Sidebar Menu Accordion jQuery

pastikn template anda sudah terpasang

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"/>

letakkan di atas kode </style>:

 
/* menu accordion by dafin */
#db-tab-acor {
 width:100%; /* lebar menu */
 margin:10px auto;
 border:2px solid #ccc;
 -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#db-tab-acor h2 {
 cursor:pointer;
 margin:0px 0px;
 padding:8px 10px;
 background-color:#333;
 font:bold 14px coda;
 color:#e6e6e6;
 text-shadow:0px 1px 0px rgba(0,0,0,0.4);
 border-top:2px solid #bbb;
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTQm_XRCjfPu3fBMcQ4pEGVr1V2_5TsiDhprbFU5AjedQWaYDFw-R93N1LoTBegU_52W7w5bprTSNSyDPIuXQe-1PoCyvX_E_C2c7Qxs22YRBvjCInCvRsm7KaW7v3GoWYRlptyvSF6nU/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;
}

#db-tab-acor .tab-view {
 background-color:#f1f1f1;
 padding:10px;
 color:black;
 height:120px;/* sesuaikan atau bisa di ubah menjadi auto */    
}

#db-tab-acor h2.show {
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9wDusrwky6SpDLQivV1W-ckuRDKs-7_fSvL03mK8WABK0miYkH5n3W4XEUPuagzJTpCBFrU1D6pIhcTp4f5tGE2P5RvuJ6cdcNTNJuOD1nVHRW-G-1pegp5kQswz-sQMLsDrKevcB7ls/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;
 background-color:#369;
 color:#ccc;
}

cari sidebar blog anda, kurang lebih kodenya seperti berikut:

 
<aside id="sidebar-wrapper">
    <b:section class="sidebar" id="sidebar" preferred="yes">
        <b:widget id="Label1" locked="false" title="Kategori" type="Label">
    </b:widget></b:section>
</aside>

tambahkan kode menunya sehingga nampak seperti berikut

 
<aside id="sidebar-wrapper">
<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
... tempat widget ...
    </div>
<h2>
MENU 2</h2>
<div class="tab-view">
... tempat widget ...
    </div>
<h2>
MENU 3</h2>
<div class="tab-view">
... tempat widget ...
    </div>
<h2>
MENU 4</h2>
<div class="tab-view">
... tempat widget ...
    </div>
</div>
<!-- end menu -->
    <b:section class="sidebar" id="sidebar" preferred="yes">
        <b:widget id="Label1" locked="false" title="Kategori" type="Label">
    </b:widget></b:section>
</aside>

Untuk cara di atas, widget anda tidak ikut masuk dalam menu jadi tidak akan masuk dalam fungsi menu accordion. jika anda ingin widget anda ada dalam menu silahkan buat seperti berikut

 
<aside id="sidebar-wrapper">
<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar1" preferred="yes">
        <b:widget id="Label1" locked="false" title="Kategori" type="Label">
      </b:widget></b:section>
    </div>
<h2>
MENU 2</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar2" preferred="yes">
        <b:widget id="HTML5" locked="false" title="Kopi" type="Label">
      </b:widget></b:section>
    </div>
<h2>
MENU 3</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar3" preferred="yes">
        <b:widget id="PopularPosts1" locked="false" title="Entri Populer" type="PopularPosts">
      </b:widget></b:section>
    </div>
<h2>
MENU 4</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar4" preferred="yes">
        <b:widget id="HTML4" locked="false" title="Donat" type="HTML">
      </b:widget></b:section>
    </div>
</div>
<!-- end menu -->
</aside>

ingat di atas hanya untuk contoh saja, jadi sesuaikan dengan widget anda sendiri.
Anda bisa menambah jumlah menu accordion ini sesuai kebutuhan dengan membuat kode seperti di bawah ini

 
<h2>MENU 5</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar" preferred="yes">
  <b:widget id="HTML8" locked="false" title="Dodol" type="HTML">
</b:widget>
</b:section>
</div>

tambahkan sampai berapa pun anda mau. untuk contoh sya buatkan saja berikut:

 
<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar1" preferred="yes">
    </b:section></div>
<h2>
MENU 2</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar2" preferred="yes"/>
</div>
<h2>
MENU 3</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar3" preferred="yes"/>
</div>
<h2>
MENU 4</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar4" preferred="yes"/>
</div>
<h2>
MENU 5</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar5" preferred="yes"/>
</div>
<h2>
MENU 6</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar6" preferred="yes"/>
</div>
</div>
<!-- end menu -->

Jangan lupa ubah MENU 1, 2, 3, dst sesuai judul widget anda atau judul content yang ada di menu.
Setelah selesai langkah di atas, tambahkan kode berikut di atas kode

 
<script type="text/javascript">
//<![CDATA[
$(function() {
    $('#db-tab-acor .tab-view').hide();
    $('#db-tab-acor h2:first').addClass('show').next().slideDown('slow');
    $('#db-tab-acor h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#db-tab-acor h2').removeClass('show').next().slideUp('slow');
            $(this).toggleClass('show').next().slideDown('slow');
        }
    });
});
//]]>
</script>

sumber https://defandaky.blogspot.com/2014/06/sidebar-menu-accordion-jquery.html