The Best Accordion for Blogger user

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 :

</head>

Replace with this

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>
</head>

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 :

</head>

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>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'/>
</head>

Customizing

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

var sidebarnameacc1="sidebar";
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 :

]]></b:skin>
[/html]
replace with this :
[html]
.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;
}
]]></b:skin>

ok Only that I hope you can use for your blog