Create Accordion Widget in Blogger


Accordion Widget for bloggerUpdate: The Script  has been updated and it will work just perfect!

It is really important to organize your content and make certain sections of your blog to appear only when the visitor is interested in it. We are using an Accordion Widget that you can find at the footer of our blog in order to display a list of Popular Series. Its an effective way for us to display long list of links in a neat and clean way. I created this widget using  JQuery and the Easing Plugin. This Accordion widget is a modified version of the Fresh content Accordion released by Martin Angelov in 2009. We customized its stylesheet and edit some parts of the scripts to make it compatible with blogger blogs. It has a great Expand/Collapse Feature. This widget collapses and hides all content inside it by default but when user clicks it, the content is displayed by expanding that tab section. I am sure you would love to add this Fancy Accordion widget to your BlogSpot blogs.

Need Demo? Check the footer of our blog! Click Here

Design a Fancy Accordion For Blogger!

Just follow this step by step easy tutorial. You don't need to worry about browser compatibility issues because we have done all that work for you. The widget is compatible with all major browsers including IE8+.

Follow these steps:

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Search for </head>
  5. 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: The yellow highlighted code is for producing the bouncing effect using the Easing Plugin. If you don't want too much animation then you can delete the yellow part of the code.

 

    6. Search for </b:skin>.  Click the black arrow to expand the code.

compressed blogger stylesheet

   7.  Paste the following CSS Styles just above </b:skin>

 

/*------ Accordion Widget by MBT  -----*/

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

Note: The look and colors of the links and fonts can be customized by editing the above the code. But the default colors would work fine with any dark footer except if your footer has white background.

   8.  Save your template and you are all done!

Add Accordion To Blogger Layout

Now you need to add your widget in the layout section and start making a list of your own popular series or any content that you wish to display inside it.

  1. Go to blogger > Layout
  2. Click Add a Gadget
  3. Choose HTML/JavaScript widget
  4. Paste the following HTML code inside it:

<ul class="container">
     
     

<!- TAB ONE -->


      <li class="menu">
     
          <ul>
            <li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>             

            <li class="dropdown1">


                <ul>
<li>1. <a  href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
<li>2. <a  href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>3. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>5. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>4. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

                </ul>
            </li>

          </ul>
         
      </li>

 

<!- TAB TWO -->


<li class="menu">
     
          <ul>
            <li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>

            <li class="dropdown1">
                <ul>

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
<li>2. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>3. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>5. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>4. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>


               
             </ul>
            </li>

          </ul>

      </li>

 

 
  </ul>

In the above code I created two tabs with 4 rows each.

  • Replace ADD TAB TITLE HERE with the name of the list title.
  • Replace ADD LINK HERE with your Link URL
  • Replace ADD LINK TEXT HERE with your anchor text

 

I don't think the above code needs further clarification. Every part is highlighted to make it more simple to be understood. If incase you wanted to add another tab then just add the following code above </ul>

 

<li class="menu">

<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>

<li class="dropdown1">
<ul>

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>

</ul>
</li>

</ul>

</li>

To increase the number of rows simply keeping adding this line of code:

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>

  • Simply change 1 with the row number.

    5.  Click Save and you are all done!

Visit your blog to see it hanging just nicely on your blog sidebar. Click the tabs and play with your newly created Accordion widget. It's all yours now! :)

Need Help?

Most of your requested this tutorial and it is my habit to share everything that we apply to our blog in order to help you customize your blogs to the bets possible look. Please let me know if you needed any help. I just hope it helps you to effectively organize your blog even more. Peace and blessings dear brothers :)

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

45 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Finally you posted about this widget :)

    ReplyDelete
  2. wow awesome widget :) and bro. it would be grate if you share related posts widget which you are using in your blog !!



    thanks :)

    ReplyDelete
    Replies
    1. Hei SiddhartH would you want MBT's current version of related post widget, then simply check out this tutorial and get your solution Blogger Related Post Widget With Thumbnail

      Delete
    2. it would be grate if you share related posts widget which you are using in your blog !!

      Delete
  3. Please share about this comment widget design to...its looking too much awesome yaar...

    Please share code about it...

    ReplyDelete
  4. Thanks for sharing this but, i stumbled on an error mesage when implementing it.
    " error parsing this code
    if ((t/=d/2) < 1) return c/2*t*t + b;
    The content of elements must consist of well-formed character data or markup"

    that is the error message i got.
    please can you help fix this? bless you bro

    ReplyDelete
    Replies
    1. Same error for me also, please help.

      Delete
    2. Hi frnd,

      same error

      Error parsing XML, line 477, column 17: The content of elements must consist of well-formed character data or markup.
      Hide notification

      please fix this asap

      Delete
  5. Thanks for sharing bro mustafa.

    ReplyDelete
  6. nice post...thanks my bro..
    www.dokumenpemudatqn.com

    ReplyDelete
  7. wao awesome comment style bro, very unique, just too good, i hope you will share that...

    ReplyDelete
  8. Error parsing XML, line 477, column 17: The content of elements must consist of well-formed character data or markup.
    Hide notice

    thanks mentor

    ReplyDelete

  9. Error parsing XML, line 47, column 17: The content of elements must consist of well-formed character data or markup.
    Hide notification , I USE THE MTB TEMPLATE

    ReplyDelete

  10. i have upgarded to custom domain but my site is not opening at custom domain, you can check it www.windowsreloded.com
    it open at windowsreloded.blogspot.com
    please help??
    i also registered domain from godaddy and it's not opening directly and i have to open it through blogspot

    ReplyDelete
  11. waooo awesome widget sir great work keep it up...

    ReplyDelete
  12. Hi, thanks for sharing. I am looking for a way to change my blogger posts templates if possible.

    ReplyDelete
  13. Currently my blogger post template is pretty simple and not so much charming. What do you think?
    http://www.article-article.com

    ReplyDelete
  14. Well Let me check and test the code and get back to you all. Thanks for pointing the errors. I will update it within few hours.


    About the new comment design, Of course I will share its code! :)

    ReplyDelete
    Replies
    1. Please share that new comment design code in next post...

      Delete
  15. Mustafa It is working Perfectly.
    Check My Blog www.DanishAsad786.blogspot.com

    ReplyDelete
  16. When I get really cool! Thanks, keep up the good work with the incredible lessons.

    ReplyDelete
  17. It’s really simple! Great widget.. :)

    ReplyDelete
  18. The widget is all ready. Tested and script updated. Use it without errors now. :)

    ReplyDelete
    Replies
    1. hello @Mohammad Mustafa Ahmedzai! I really find this blog helpful. This is exactly the post Ive been searching for. Thanks very much for sharing. However, like @Historietologo Navarrete (one comment on this thread), mine is always expanded. This is my blog http://www.myrainbowmemories.blogspot.com/ . Please refer to table of contents widget at the right side panel. how can i collapse the list by default? like yours in this blog. thank you very much for your help. :)

      Delete
  19. working perfectly now. weldone mohammad. God blees YOU

    ReplyDelete
  20. Assalam O Alaikum Bro , i want to add this in Blog Post , is it possible ? can you tell me please how if it's possible ?

    ReplyDelete
  21. I love the widget, its something ive been looking for quite a bit. The trouble Im having with is the default width to the expanded texts, i dunno if its a missclosed tag or what, but they spill over onto the page (the down arrow appears way over to the right). Any help is much aprecciated!

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. You are the best Blogger for all the time.

    ReplyDelete
  24. You sir, are a blogging God. Brilliant.

    ReplyDelete
  25. Hi, I have a problem after I put this code to my blog.
    the widget works well, but after I put it, the other drop down menu on top doesn't work. it has a sub topic, but it doesn't show up anymore.
    and other drop down menu for table of content of yours, also it expanded out
    and it doesn't shrink down. pleaes answer as soon as possible

    thank you

    Sincerlely

    ReplyDelete
  26. please answer..... after i install this code to my blog, my blog slider stop working....

    ReplyDelete
  27. Hi. The codes work. The widget runs.
    But my other flash widget stop working, like my slider.

    ReplyDelete
    Replies
    1. To others who face the same problem with me, don't copy the ajax google code thing if you already have the code in your blog html.

      Now this widget runs along with my slider here www.kelanamuslim.com, yay!

      Delete
  28. hi Aslam o alikum bro nice and thnax for soliving my problm regarding side menu tab like menu bar dear i have to ask how i remove coding that after using ur gadget coding is coming kindly tell me how i remove it thanx that coding coming after using at top of my blog anwer bhatti admin of knowledgebay.com

    ReplyDelete