Sidebar Accordion

Membuat sidebar accordion pada blog

HTML

<div id="sidebar-wrapper">
    <div class='widget HTML' id='HTML5'>
        <h2 class='title'>Panel 1</h2>
        <div class='widget-content'>
            <div class='komunitas'>
                <a href='http://jsfiddle.net/user/dharlaferdana/' rel='nofollow' title='Jsfiddle' target='_blank'>
                    <img src='http://2.bp.blogspot.com/-lzfcsagfGEA/UDsrNlyTfTI/AAAAAAAAEMY/z-RDep7u-ro/s1600/jsfiddle-logo.png' alt='Jsfiddle' width='72' height='72' />
                </a>
                <a href='http://cssdeck.com/user/Dharla-Ferdana' rel='nofollow' title='Css Deck' target='_blank'>
                </a>
                <a href='http://stackoverflow.com/users/2408175/dharla-ferdana' rel='nofollow' title='StackOverlow' target='_blank'>
                    <img src='http://3.bp.blogspot.com/-bMVtZfVaLOM/UDsNZ8PmECI/AAAAAAAAEJA/sm-7wSB7xVc/s1600/stackoverflow-logo.png' alt='StackOverlow' width='72' height='72' />
                </a>
                <a href='http://css-tricks.com/forums/profile/dharlaferdana' rel='nofollow' title='CSS-tricks' target='_blank'>
                    <img src='http://3.bp.blogspot.com/-w-FHu7d1L2I/UDsrLCWHEbI/AAAAAAAAEMQ/n4Tg5IRSJsM/s1600/csstricks-logo.png' alt='Css-tricks' width='72' height='72' />
                </a>
            </div>
        </div>
    </div>
    <div class='widget HTML' id='HTML5'>
        <h2 class='title'>Panel 2</h2>
        <div class='widget-content'>
            <div class='komunitas'>
                <a href='http://jsfiddle.net/user/dharlaferdana/' rel='nofollow' title='Jsfiddle' target='_blank'>
                    <img src='http://2.bp.blogspot.com/-lzfcsagfGEA/UDsrNlyTfTI/AAAAAAAAEMY/z-RDep7u-ro/s1600/jsfiddle-logo.png' alt='Jsfiddle' width='72' height='72' />
                </a>
                <a href='http://cssdeck.com/user/Dharla-Ferdana' rel='nofollow' title='Css Deck' target='_blank'>
                    <img...

CSS

body {
  background-color:#bbb;
}
#sidebar-wrapper {
  background-color:#31353e;
  width:380px;
  margin:10px auto;
  border:4px solid #ddd;
  -webkit-box-shadow:inset 0 0 5px black;
  -moz-box-shadow:inset 0 0 5px black;
  box-shadow:inset 0 0 5px black;
 }
 
 #sidebar-wrapper h2 {
  text-shadow:0 1px 0 black;
  background-color:#31353e;
  background-image:-webkit-linear-gradient(top,#31353e,#30343e);
  background-image:-moz-linear-gradient(top,#31353e,#30343e);
  background-image:-ms-linear-gradient(top,#31353e,#30343e);
  background-image:-o-linear-gradient(top,#31353e,#30343e);
  background-image:linear-gradient(top,#31353e,#30343e);
  border:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  font:normal bold 100%/28px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  color:#bbb;
  text-transform:uppercase;
  height:28px;
  padding:0 .8em;
  margin:0;
}
 
 #sidebar-wrapper .widget-content {
  padding:10px 15px;
  height:auto;
  background-color:#333;
  font-size:99%;
  color:#666;
  -webkit-box-shadow:inset 0 0 5px black;
  -moz-box-shadow:inset 0 0 5px black;
  box-shadow:inset 0 0 5px black;
 }

#HTML5 .widget-content {text-align:center}
#HTML5 img {
  display:inline;
  background-color:black;
  padding:4px;
  border:none;
  opacity:.7;
}
#HTML5 img:hover {opacity:1}

 #sidebar-wrapper h2.active {
  background-image:-webkit-linear-gradient(top,#3c3c3c,#333);
  background-image:-moz-linear-gradient(top,#3c3c3c,#333);
  background-image:-ms-linear-gradient(top,#3c3c3c,#333);
  background-image:-o-linear-gradient(top,#3c3c3c,#333);
  background-image:linear-gradient(top,#3c3c3c,#333);
  border-color:#555 transparent #222;
}

JavaScript

jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
	def: 'easeOutQuad',
	swing: function (x, t, b, c, d) {
		//alert(jQuery.easing.default);
		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	},
	easeInQuad: function (x, t, b, c, d) {
		return c*(t/=d)*t + b;
	},
	easeOutQuad: function (x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	},
	easeInOutQuad: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInCubic: function (x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	},
	easeOutCubic: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	},
	easeInOutCubic: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},
	easeInQuart: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	},
	easeOutQuart: function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeInOutQuart: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	easeInQuint: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t*t + b;
	},
	easeOutQuint: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	},
	easeInOutQuint: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
		return c/2*((t-=2)*t*t*t*t + 2) + b;
	},
	easeInSine: function (x, t, b, c, d) {
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	},
	easeOutSine: function (x, t, b, c, d) {
		return c * Math.sin(t/d * (Math.PI/2)) + b;
	},
	easeInOutSine: function (x, t, b, c, d) {
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	},
	easeInExpo: function (x, t, b, c, d) {
		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	},
	easeOutExpo: function (x, t, b, c, d) {
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	},
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 *...