--> Create Accordion Widget in Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Create Accordion Widget in Blogger

Update: The Script  has been updated and it will work just perfect! It is really important to organize your content and make certain sect...

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 :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Create Accordion Widget in Blogger
Create Accordion Widget in Blogger
http://lh4.ggpht.com/-elqAtnMqn34/UapEtxwev8I/AAAAAAAAJxw/E3nyYF2eMDw/image%25255B17%25255D.png?imgmax=800
http://lh4.ggpht.com/-elqAtnMqn34/UapEtxwev8I/AAAAAAAAJxw/E3nyYF2eMDw/s72-c/image%25255B17%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2013/06/create-accordion-widget-in-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2013/06/create-accordion-widget-in-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy