Bismillah, Alhamdulillah

Skip to Content

The Best Accordion for Blogger user

December 14th, 2009

Bismillah, Alhamdulillah

After long time this widget (Accordion for Blogger) I’m not release, some blogger ask me about the script at my sidebar. For that I release this script for you all.
Many blogger already make this but none of them user friendly for new blogger.

This script very useful to everyone, specially for those who have a lot of content on their sidebar and spend much time thinking where to place new stuff.

The method I developed is from Simple JQuery Accordion Menu, I just found it very useful and decided to adapt that technique to Blogger platform. This tutorial will bring you a very easy to implement way to make accordions out of your sidebar widgets, here are some features of my method:

  • Easy to install.
  • No need to edit html in Sidebar part.
  • Freedom to set which widgets will show or hide.
  • Have two type, first is Accordion and second is Only hide/show
  • After implementing, Widgets are normally edited from Page Elements section.

The Final Result

If you want to see it working please check the live demo.

Demo using Template from Choen if you want you can download here Grid Template

From Demo First Sidebar using Accrodion and Second sidebar Toggle Show/Hide


Step 1 – Installing jQuery Library

This script needs the jQuery JavaScript library, if you already have it installed, you can skip this step, if you dona’t have find this :


Replace with this

<script src='' type='text/javascript'>

Step 2 – Installing the Script

Ok now that you’ve made sure that you have jQuery
installed, you need to install the script, find this :


replace with this :

<script type='text/javascript'>
var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2=&quot;sidebar2&quot;;
var accordionside2=false;
var sideshow2=new Array(0,0);
<script src='' type='text/javascript'/>


As you have noted you’ll get a few lines that can be customized, those are:

var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);

sidebarnameacc1 is your first sidebara’s id, it is generally just sidebar, but just in case you have a different id you can learn from This post

accordionside1 –> True mean it will be accordion type, false mean
Hide or Show Contents, you can try from Demo.

sideshow1 = number for your chosen widgets to Show, usually if you
have advertisement you want to always show when load with this variable you can
select the widgets.

0 = first widget at your sidebar

1 = second widget at your sidebar and so on

if only one for first widget like this

var sideshow1=new Array(0,0);

if only one for second widget like this

var sideshow1=new Array(1,1);

if two for first and second widget like this

var sideshow1=new Array(0,1);

if many you can add like this

var sideshow1=new Array(0,1,2,3,4,5);

Ok Finish only that the step if you want to give Style you can continue on
step 3

Step 3 – Only for Advanced Users : Placing the styles on your CSS

I give “headactive” class to make different when Content show or hide, you
can change waht ever you want for that template I use this style.

find this in your template :

replace with this :
.sidebar h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;

.sidebar2 h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;

ok Only that I hope you can use for your blog

Categories: Accordion, Blogger Tricks, Featured

Tags: ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Leave a response

170 Responses to “The Best Accordion for Blogger user”

  1. Syukron akhi, informasinya sangat membantu sekali

  2. Alhamdulillah, syukron akhi,,informasinya sangat membantu

  3. Cestin says:

    nice posts helpful for a new blogger

  4. Umare says:

    thnkz for sharing this helpful tips

  5. Abdul Rahman says:

    nice widget good jquery effect
    i’m impressed with that Nayak

  6. akhyar says:

    i cannot find the script, why? it’s just the first line and the second and the third are in different locations..

  7. Agri says:

    wow! cool this tips. Thanks for the tips :D

  8. […] CSS3 and HTML based social share widget in five different variant from our Bloggermint labs. 7. Accordin: A unique blogger widget from Abu Farhan. This will show or hide your widget on your sidebar. A […]

  9. […] The Best Accordion for BloggerThis Script to make all sidebar have accordion effects […]

  10. We’re a bunch of volunteers and opening a brand new scheme in our community. Your web site provided us with helpful information to paintings on. You’ve done an impressive job and our whole group might be thankful to you.

  11. Good stuff! Stumbled upon your post while doing some research about this topic. You are definitely an authority in the subject. I’ll have to use this.

  12. olie argan says:

    Het is grappig, dat soms de meest eenvoudige tips vaak de beste

  13. We still cannot quite believe We can often be sort checking important points entirely on your blog post. Our neighbors and i are sincerely thankful for your personal generosity also giving me possibility pursue our chosen profession path. Wanted material I became through the web-site.

  14. nieta says:

    pekerjaan yang hebat , blogger yang mengharumkan nama bangsa , saya berharap bisa seperti anda tapi bagaimana mungkin? :D

  15. adam says:

    scip ini apakah dapat di pasang di blogger template baru om.,,

  16. selolo says:

    makasi om ini sangat bagus menurut anda n apakah blog ini juga terdaftar dalam facebook.,,
    kalo terdaftar aku juga ikut jadi followernya.,,

  17. uklam says:

    senang berkunjung kembali , tempat ini Langganan untuk setting Blog dan PR valid baru :D

Leave a Reply

nine + seven =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen