Login into your Blogger dashboard and click on Layout > edit HTML. Do not click on "Expand widget Templates". 

STEP 1 - Script placement


The script is taken from jQuery library and hosted on google, therefore you don't have to download or upload anything.

Find </head> using Ctrl+F. Copy and paste the below script just above the section.

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

<script>

$(document).ready(function() {

//Set default open/close settings

$(&#39;.acc_container&#39;).hide(); //Hide/close all containers

$(&#39;.acc_trigger:first&#39;).addClass(&#39;active&#39;).next().show(); //Add &quot;active&quot; class to first trigger, then show/open the immediate next container

//On Click

$(&#39;.acc_trigger&#39;).click(function(){

if( $(this).next().is(&#39;:hidden&#39;) ) { //If immediate next container is closed...

$(&#39;.acc_trigger&#39;).removeClass(&#39;active&#39;).next().slideUp(); //Remove all &quot;active&quot; state and slide up the immediate next container

$(this).toggleClass(&#39;active&#39;).next().slideDown(); //Add &quot;active&quot; state to clicked trigger and slide down the immediate next container

}

return false; //Prevent the browser jump to the link anchor

});

});

</script>

STEP 2 - Placement of CSS

Find </b:skin> section , copy and paste the below code/CSS just above the section.

h2.acc_trigger {

padding: 0; margin: 0 0 5px 0;

background:#fff no-repeat;

height: 46px; line-height: 46px;

width: 300px;

font-size: 2em;

font-weight: normal;

float: left;

}

h2.acc_trigger a {

color: #fff;

text-decoration: none;

display: block;

padding: 0 0 0 50px;

}

h2.acc_trigger a:hover {

color: #fff;

}

h2.active {background-position: left bottom;}

.acc_container {

margin: 0px 0px 5px 0px; padding: 0px;

overflow: hidden;

font-size: 1.2em;

width: 300px;

        float:left;

clear: both;

background: #000;

border: 1px solid #d6d6d6;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-moz-border-radius-bottomright: 5px;

-moz-border-radius-bottomleft: 5px;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

}

.acc_container .block {

padding: 0px 0px 0px 0px;

}

Before proceeding to step 3, preview your template to check if you have pasted all the codes correctly. If nothing seems to be out of order, then go ahead and save your template.

STEP 3 - Mark-up/ HTML & Content

Go to Layout >  Page Elements
Click on Add a Gadget and select HTML/Javascript. Copy and paste the below code in the gadget.

<h2 class="acc_trigger"><a href="#">tab title 1</a></h2>

<div class="acc_container">

    <div class="block">

<!--Content Goes Here-->ITEM 1

    </div>

</div>

<h2 class="acc_trigger"><a href="#">tab title2</a></h2>

<div class="acc_container">

    <div class="block">

<!--Content Goes Here-->ITEM 2

    </div>

</div>

<h2 class="acc_trigger"><a href="#">tab title3</a></h2>

<div class="acc_container">

    <div class="block">

<!--Content Goes Here-->ITEM 3

    </div>

</div>

You can add as many tabs and content you want. Simple repeat the following step and add desired content as mentioned and it will work just fine.


<h2 class="acc_trigger"><a href="#">title</a></h2>
<div class="acc_container">
    <div class="block">
<!--Content Goes Here-->
    </div>
</div>

If you want to understand what each element does and how each element can be changed, I suggest you head over to the original tutorial. He has explained every element in detail and with screenshots.

Let us know if you have any questions or just like to show off your accordion. We'd be happy to feature it  here.