OO Expando Sections

[Basscyst]

Here's a little script for making multiple expandable / collapsible sections on a page. (http://xssolutions.net/Expando.htm)

Javascript:

//*******************************************
// Expando sections by Adam Matthews A.K.A. Basscyst
// Last updated: 7/16/2008
// Free to use with credits in tact
//*******************************************
var Expando = function(click_obj,content_obj){
//the image displayed when collapsed
this.close_img = "images/expando.png";

//the image displayed when open
this.open_img = "images/collapso.png";

//the object clicked to toggle collapse
this.c_obj=click_obj;
this.c_obj.setAttribute('href','javascript:void(0);');

//the object that is to expand and collapse
this.col_obj=content_obj;
this.col_obj.style.height=this.col_obj.offsetHeight + 'px';

//Add event handler to click object
this.c_obj.onclick=this.toggleObj.bind(this);

//Status of collapsible section
this.stat = "open";

//original height of section
this.base_height = this.col_obj.offsetHeight;
};
Expando.prototype.toggleObj=function(){
var objRef = this;
var done=false;
var h = this.col_obj.style.height.replace('px','') * 1;
switch(this.stat){
case "open":
h=h - 30;
if(h <= 0){
h = 0;
this.stat = "closed";
this.c_obj.style.backgroundImage = 'url('+ this.close_img +')';
done = true;
};
break
case "closed":
var h = h + 30;
if(h >= this.base_height){
h = this.base_height;
this.stat = "open";
this.c_obj.style.backgroundImage = 'url('+ this.open_img +')';
done = true;
};
break;
};
this.col_obj.style.height=h + 'px';
if(!done){
setTimeout(function(){objRef.toggleObj();},1);
};
};
//creates a reference to a method
Function.prototype.bind = function (object) {
var method = this;
return function (event) {
method.call(object, event || window.event);
};
};


CSS Example:

/********************************************
/* Section Containers
/********************************************/

.section
{
width:472px;
padding:0px;
margin-bottom:15px;
}
.section h2
{
font-size:100%;
border-bottom:solid 1px #002DAA;
}
.section h2 span
{
background-color:#002DAA;
color:#FFFFFF;
padding-left:3px;
padding-right:3px;
}
.section_label
{
margin:0px;
}
.static_header
{
border-left:solid 1px #002DAA;
border-right:solid 1px #002DAA;
width:470px;
float:left;
background-color:#CCCCCC;
}
.static_header_right a
{
display:block;
height:24px;
width:24px;
background-color:#002DAA;
margin-top:3px;
margin-bottom:3px;
background-image:url(../../images/caollapso.png);
background-repeat:no-repeat;
}
.static_header_left
{
width:440px;
float:left;
}
.static_header_left p
{
padding-left:5px;
margin:0px;
margin-top:5px;
}
.static_header_right
{
width:24px;
float:left;
}
.collapsible_content
{
clear:left;
padding:0px;
height:350px;
width:470px;
overflow:auto;
border-left:solid 1px #002DAA;
border-right:solid 1px #002DAA;
}
.collapsible_content div
{
padding:5px;
}
.static_foot
{
background-color:#CCCCCC;
border-left:solid 1px #002DAA;
border-right:solid 1px #002DAA;
border-bottom:solid 1px #002DAA;
text-align:center;
}
.static_foot input
{
font-size:65%;
padding:0px;
margin:0px;
}
.static_foot p
{
padding:5px;
margin:0px;
}


HTML Example:

<div class="section">
<h2 class="section_label"><span>Section Title</span></h2>
<div class="static_header">
<div class="static_header_left">
<p>
Static Text - Always Visible
</p>
</div>
<div class="static_header_right"><a href="#" id="expando_click"></a></div>
</div>
<div id="expando" class="collapsible_content">
<div>
Collapsible Content
</div>
</div>
<div class="static_foot">
<p>Foot Text</p>
</div>
</div>


To call the code pass the click object and the collapsible object:

window.onload=function(){
var xs1 = new Expando(document.getElementById('expando_click'),document.getElementById('expando'));
};


Have fun with it,
Basscyst