Design a Fancy Accordion Widget For Blogger

Accordion widgets are really helpful in organizing links in your blog. You can use it to list out popular posts in categories in the form of an expandable and collapsible menu. It is an effective and neat way of listing longs list of links.

This widget uses jQuery and Easing Plugin and is compatible with all major browsers. The Accordion widget for blogger is a modified version of Colorful Content Accordion by Martin Angelov. And is bloggerised by Mohammad of MBT.

VIEW A LIVE DEMO

ADDING THE WIDGET TO YOUR BLOG

✔ Navigate to blogger dashboard > template and click on Edit HTML

✔ Search for </head> and just above it paste the following code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";
/* Binding a click event handler to the links: */
$('li.button a').click(function(e){
/* Finding the drop down list that corresponds to the current section: */
var dropDown = $(this).parent().next();
/* Closing all other drop down sections, except the current one */
$('.dropdown1').not(dropDown).slideUp('slow');
dropDown.stop(false,true).slideToggle('slow');
/* Preventing the default event (which would be to navigate the browser to the link&#39;s address) */
e.preventDefault();
})
});
// t: current time, b: begInnIng value, c: change In value, d: duration
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 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
   return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
},
easeInOutBounce: function (x, t, b, c, d) {
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
}); 
//]]>
</script>

Note: You can remove the code highlighted in orange if you don't want to much animation in the widget. It produces the bouncing effect (Easing Plugin)

✔ Now search for </b:skin> and just above it paste the below code

/*------ Accordion Widget -----*/
ul.container{
    width:275px;
    margin:0 auto;
    padding:0px;
}

li.menu{
    padding:5px 0;
    width:100%;
}
li.button a{
    display:block;
    font-family: Arial, sans-serif,Helvetica;
    font-size:12px;
    overflow:hidden;
    padding:0px 0px 5px 0;
    position:relative;
    width:100%;
        text-transform:capitalize;
}
li.button a:hover{
    text-decoration:none!important;
}
li.button a span{
 
    right:0px;
        top:0px;
    position:absolute;
    color:#ccc;
    display:block;
}
.dropdown1{
    display:none;
    padding-top:5px;
    width:100%;
}
.dropdown1 li{
 
 
 
border:1px solid #7E7E7E;
    color:#CCCCCC;
    margin:5px 0;
    padding:4px 10px;
     
}
.dropdown1 li:hover {
border:1px solid #ccc;
text-decoration:none;
}
.dropdown1 li a:hover {
text-decoration:none;
}

✔ Save the changes made.
✔ Now navigate to Blogger dashboard > layout and click on Add a Gadget
✔ Choose HTML/JavaScript widget from the list
✔ Paste the below code into it and save the widget

<ul class="container">
   
   
<!- TAB ONE -->
      <li class="menu">
   
          <ul>
            <li class="button"><a href="#" >ADD TAB ONE TITLE HERE<span>▼</span></a></li>          
            <li class="dropdown1">
                <ul>
<li>1. <a  href="ADD YOUR LINK HERE" >ADD YOUR TEXT HERE</a></li>
<li>2. <a  href="ADD YOUR LINK HERE">ADD YOUR TEXT HERE</a></li>
<li>3. <a href="ADD YOUR LINK HERE">ADD YOUR TEXT HERE</a></li>
<li>5. <a href="ADD YOUR LINK HERE">ADD YOUR TEXT HERE</a></li>
<li>4. <a href="ADD YOUR LINK HERE">ADD YOUR TEXT HERE</a></li>
                </ul>
            </li>
          </ul>
       
      </li>

<!- TAB TWO -->
<li class="menu">
   
          <ul>
            <li class="button"><a href="#" >ADD TAB TWO TITLE HERE<span>▼</span></a></li>
            <li class="dropdown1">
                <ul>
<li>1. <a href="ADD YOUR LINK HERE" >ADD YOUR TEXT HERE</a></li>
<li>2. <a href="ADD YOUR LINK HERE">ADD YOUR TEXT HERE</a></li>
<li>3. <a href="ADD YOUR LINK HERE">ADD YOUR TEXT HERE</a></li>
<li>5. <a href="ADD YOUR LINK HERE">ADD YOUR TEXT HERE</a></li>
<li>4. <a href="ADD YOUR LINK HERE">ADD YOUR TEXT HERE</a></li>
             
             </ul>
            </li>
          </ul>
      </li>


  </ul>

 Note: Edit the highlighted parts in the above code to complete your accordion widget. You can also add more tabs into the widget. I think you can do it yourself. hope it's fine for you. thank you and take care.