jQuery Accordion Widget for Blogger

Accordion is more use as Multi Tabbed Widget.you might have been seeing on many sites.
I this article i am going to how to add Accordion as a Widget for your blog.
Check out my other useful jQuery Widgets For Blogger

Closeable jQuery Floating Message Box For Bloggers

Simple jQuery Multi Tabbed Navigation Widget For Blogger

Smooth Scrolling Widget For Blogger

Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.

/* TechTasks accordian CSS*/
#TTAccordian {
width: 100%;
margin-left: auto;
margin-right: auto;
}

.accordionButton {
width:100%;
float: left;
_float: none;
background: #E0E0E0; /* Default Background Color*/
border: 1px solid #999;
border-bottom: 1px solid #ccc;
cursor: pointer;
border-radius:5px;
}
.accHead
{
padding:5px 5px 5px 10px;
font: bold 12px Arial, Tahoma, Verdana;
text-transform: uppercase;
}
.accordionContent {
width: 100%;
float: left;
_float: none;
background: #ffffff;
border-radius:5px;
}

.on {
background: #0080FF; /* Selected Accordion Background Color*/
border-radius:5px;
color:#ffffff;
}

.over {
background: #5CAEFF; /* Mouse Over Background Color*/
color:#fff
border-radius:5px;
color:#ffffff;
}

/* End TechTasks accordian CSS*/

»If you want customize the Tabbed Widget colors just Follow the comments to Change the colors

»Simply replace these colors with your custom colors in the above code respectively.

Step 2:Find </head> .

Cope and paste the below just before </head> this.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
/*----------Start TechTasks Tabber Script--------------*/
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
/*** CLOSES ALL S ON PAGE LOAD ****/
$("div.accordionContent").hide();

/* OPENS THE DIV THAT IS ASSIGNED WITH THE ID open */
$("#open").trigger('click');
});
/*----------End TechTasks Tabber Script--------------*/
</script>

Step 3:Find <div id='sidebar-wrapper'> or <div id='sidebar'>

If u can't find above code don't bother about that,Coz template designers are developed different ways.Just find the starting <Div> of Sidebar

Now copy and paste below code just below that.

<!-- Start accordian -->
<div id='TTAccordian'>
<div class='accordionButton' id='open'><div class='accHead'>Facebook</div></div>
<div class='accordionContent'>
<b:section class='sidebar' id='accordion1' preferred='yes'>
</b:section>
</div>
<div class='accordionButton'><div class='accHead'>Future Widgets</div></div>
<div class='accordionContent'>
<b:section class='sidebar' id='accordion2' preferred='yes'>
</b:section>
</div>
<div class='accordionButton'><div class='accHead'>About Author</div></div>
<div class='accordionContent'>
<b:section class='sidebar' id='accordion3' preferred='yes'>
</b:section>
</div>
</div>
<!-- end accordian -->

Finally Save the Template.


Then Go to your page Elements Page and add the widgets for your accordion.

I think i am free to respond your queries.

Source: stemkoski.com