$(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'); } }); });
<div id='db-tab-acor'> <h2>Panel 1</h2> <div class='tab-view'> ... tempat widget ... </div> <h2>Panel 2</h2> <div class='tab-view'> ... tempat widget ... </div> <h2>Panel 3</h2> <div class='tab-view'> ... tempat widget ... </div> <h2>Panel 4</h2> <div class='tab-view'> ... tempat widget ... </div> </div>
#db-tab-acor { width:50%; /* sesuaikan dengan lebar sidebar blog */ 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(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/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(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center; background-color:#369; color:#ccc; }