Create Expand/Collapse or expandable content Script for Blogger

If you often visit Bloganol then you must have known a post titled expandable Content Script for blogger. That hack was not satisfying you may have felt so. In that hack the title background color and background color may not have matched your Sidebar title Background Color and Background Color. Beside that it may not have matched your post style, Font color and many more. Now Bloganol has upgraded that code for better expandable content.. Some credits of this hack also goes to flooble.

In the previous hack there were only two codes and the content was Initially hidden. But now CSS codes have been added and Initially hidden or Initially Visible style Codes are provided.Now without stretching this post lets start creating this Cool Blogger Hack.

Note : Before you start any hack Please backup your Template.

Step 1

After you goto your blog edit Html Page , copy the following CSS code and Paste it to the head section of your Template just before . This CSS code is Provided for two Templates. Minima and Denim. If you are Using Minima Template then Copy the Minima Code or If you are Using Denim Template then Copy the Denim Code and Paste just before ]]></b:skin>.

Denim Code

/* Expandable Content CSS Code for Denim Template
----------------------------------------------- */

.expandtitle{
background-color:$sidebarTitleBgColor;
color:$sidebarTitleTextColor;
padding-left:5px;
}

.expandcontent{
background-color: $mainBgColor;
color: $textColor;
}

Minima Code

/* Expandable Content CSS Code for Minima Template
----------------------------------------------- */

.expandtitle{
background-color:$sidebarbgcolor;
color:$sidebarcolor;
padding-left:5px;
}

.expandcontent{
background-color: $sidebarbgcolor;
color:$sidebartextcolor;
}

The purpose of using above CSS code is to match color of expandable content and you blog color.You can use your own choice color also. To use your own choice color replace the above color with your liked color code.

Step 2

Copy the following JavaScript code paste it just after ]]></b:skin> in your Template.

<!-- flooble Expandable Content header start -->
<script language="javascript">

// Expandable content script from flooble.com
// Promoted by bloganol.blogspot.com
// For more information please visit:
// http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else {
return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d =
getObject(divId);
if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<!-- flooble Expandable Content header end -->

This is the most important code of this hack . If do do a simple mistake in the above code the whole hack will fail . So please copy this code as it is .

Step 3

Now Paste the following code to your blog By adding a new Html Page from your blog Layout Page.

<div class="expandtitle">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr><td>  Title Here  </td><td

align="right"></div>


[<a title="show/hide" id="exp1209796610_link" href="javascript:
void(0);" onclick="toggle(this, 'exp1209796610');">&#8722;</a>]</td></tr></table></div>

<div id="exp1209796610" style="padding: 3px;" class="expandcontent">

Your Content Here.

</div>
</td></tr></table>

See the above code clearly and replace Title here with your Content Title and Replace Your Content here with your Content.

Step 4

Now two options come for you to make your expandable content Initially visible or Initially Hidden . If you like to display your expandable content Initially Hidden then paste the following code with the code from Step 3 or if you like to display it initially visible then Skip this step.

<script language="javascript">toggle(getObject('exp1209796610_link'),
'exp1209796610');</script>

Step 5

Save your Template. Oh! one thing I forgot to say that if you like to create more than one expandable content in your blog then you should not have to perform this hack from step 1 again and again . Once you Install this hack in your blog from next time you can create other expandable content by customizing the code from step 3 and Pasting it to your blog.

By using this hack you can add as much page Elements in your blog as you like beside this your blog will also look more clear and attractive. I hope you enjoy this hack and will enjoy more using it. If you like this post or Problem with this post then please Leave us a comment on this post. Or if you like to promote this post then please Link to this post in your blog.