Show and Hide areas gradually with a toggle button

To make sections (DIVs or TDs) of your page expnd into view then collapse again when toggling with a button, there is procedure:

So when we call our function (e.g. toggleExpansion) we will send it 4 variables:

srcObj = area element ID

Defines the area element to toggle

expandTheWidth = true | false

Defines whether the width is elastic or not

expandTheHeight = true | false

Defines whether the height is elastic or not

collapseOthers = "otherElementID:1:1;anotherElementID:1:1"

Defines which other elements cannot be shown at the same time, represented by a string, where the elements are delimited by ';' and the function variables are delimited by ':'.

Also, on loading we want to define some parameters:

var sizingObject=new Array();

// an array to contain the objects and their current properties

expandTimer=null;

// a timer that calls the function that changes the sizes

expandInterval=2;

// the millisecond interval for the timer

expandMaxVelocity=200;

// the most amount of pixels the area can expand by

expandMaxProportion=0.1;

// the maximum proportion of the dimensions that the area can expand by

expandProportion=3;

// the default expand proportion - 3 means that the expansion amount will 1/3 of the dimension left every step

collapseMaxVelocity=expandMaxVelocity;

// the most amount of pixels the area can collapse by

collapseProportion=expandProportion;

// the maximum proportion of the dimensions that the area can collapse by

The function that will control what happens when a toggle is pressed, will look something like this:

function toggleExpansion(srcObj, expandTheWidth, expandTheHeight, collapseOthers) {

// the function receiving the 4 variables

src=document.getElementById(srcObj);

// src is the element to toggle

if (src.style.display=="none") {

// is the element collapsed

sizeObject(src,expandTheWidth,expandTheHeight,true);

// calls sizeObject([target element],[elastic width],[elastic height],[true = expand]) defined below

if (collapseOthers!="") {

// if other elements must checked

objs=collapseOthers.split(";");

// objs is an array of strings referring to the other elements

for (i=0;i//process each other element

vals=objs[i].split(":");

vals is an array containing the elements properties

if (document.getElementById(vals[0])) {

// if the element is found

col=document.getElementById(vals[0]);

// col is the element object

if (col.style.display!="none") {

// if the element is not collapsed

sizeObject(col, vals[1], vals[2],false);

// then collapse it by calling sizeObject([target element],[elastic width],[elastic height],[false = collapse]) defined below

}

}else{

sizeObject(src,expandTheWidth,expandTheHeight,false);

// if visible then collapse the target by calling sizeObject([target element],[elastic width],[elastic height],[false = collapse]) defined below

}

The sizeObject function adds the target object to the array of element to collapse or expand:

function sizeObject(srcObj,expandWidth,expandHeight,expand) {

// sizeObject([target element],[elastic width],[elastic height],[false = collapse | true = expand])

if (expand) {

// if object is to be expanded

if (expandWidth && expandHeight) srcObj.style.position='absolute';

// if both height and width are elastic then position absolute

srcObj.style.visibility='hidden';

// hide the target object

srcObj.style.display='block';

// display the target object

srcObj.style.overflow='visible';

// ensure the target object bounds it's contents

srcObj.style.width=srcObj.style.height='';

// remove any set dimensions

w=srcObj.offsetWidth;

// set w to the width of the fully displayed target

h=srcObj.offsetHeight;

// set h to the height of the fully displayed target

}else{

// if object is to be collapsed

w=srcObj.offsetWidth;

// set w to the width of the currently displayed target

h=srcObj.offsetHeight;

// set h to the height of the currently displayed target

}
cw=dw=w;

// set cw (current width) and dw (desired width) to w

ch=dh=h;

// set ch (current height) and dh (desired height) to h

if (expand) {

// if object is to be expanded

if (expandWidth) cw=1;

// if the width is elastic set the current width (cw) to 1

if (expandHeight) ch=1;

// if the height is elastic set the current height (ch) to 1

maxexp=Math.sqrt(Math.pow((dh-ch>dw-cw)?(dh-ch)*expandMaxProportion:(dw-cw)*expandMaxProportion,2));

// set maxexp to the maximum expand pixel differential from the current towards the desired dimension

}else{

// if object is to be collapsed

if (expandWidth) dw=0;

// if the width is elastic set the desired width (dw) to 0

if (expandHeight) dh=0;

// if the height is elastic set the desired height (dh) to 0

maxexp=Math.sqrt(Math.pow((ch-dh>cw-dw)?(ch-dh)*expandMaxProportion:(cw-dw)*expandMaxProportion,2));

// set maxexp to the maximum collapse pixel differential from the current towards the desired dimension

}
if (maxexp>expandMaxVelocity) maxexp=expandMaxVelocity;

// if the maximum pixel differential is greater than expandMaxVelocity then set it to expandMaxVelocity

if (maxexp<5) maxexp=5;

// ensure the maximum pixel differential is not less then 5

srcObj.style.width=cw+"px";

// set the target width to current width

srcObj.style.height=ch+"px";

// set the target height to current height

srcObj.style.overflow='hidden';

// set any target overflow is hidden

srcObj.style.position='';

// remove the target's position attribute

srcObj.style.visibility='visible';

// make the target visible

o={"object":srcObj, "width":expandWidth, "height":expandHeight, "expand":expand, "currentWidth":cw, "currentHeight":ch, "desiredWidth":dw, "desiredHeight":dh, "maxExpand":maxexp};

// create an array containing the target object and it's properties

sizingObject.push(o);

// add the array to the list of size objects

if (expandTimer==null) expandTimer = setTimeout("grow()", expandInterval);

// if the timer is not defined, create it to call the function grow described below

}

The grow function performs the animation of the target element:

function grow() {

for(i=sizingObject.length-1;i>=0;i--) {

// sequence through the array of sizing objects

dw=dh=0;

// set the desired width and heights to 0

if (sizingObject[i]["width"]) dw=(sizingObject[i]["desiredWidth"]-sizingObject[i]["currentWidth"])/expandProportion;

// if width is elastic set the desired width (dw) to a proportion of the pixel differential

if (sizingObject[i]["height"]) dh=(sizingObject[i]["desiredHeight"]-sizingObject[i]["currentHeight"])/expandProportion;

// if height is elastic set the desired height (dh) to a proportion of the pixel differential

if (dw>sizingObject[i]["maxExpand"]) dw=sizingObject[i]["maxExpand"];

// ensure dw is not greater than the maximum diffential

if (dw<-sizingObject[i]["maxExpand"]) dw=-sizingObject[i]["maxExpand"];

// ensure dw is not less than the maximum negative diffential

if (dh>sizingObject[i]["maxExpand"]) dh=sizingObject[i]["maxExpand"];

// ensure dh is not greater than the maximum diffential

if (dh<-sizingObject[i]["maxExpand"]) dh=-sizingObject[i]["maxExpand"];

// ensure dh is not greater than the maximum negative diffential

sizingObject[i]["currentWidth"]+=dw;

// add dw to the current width

sizingObject[i]["currentHeight"]+=dh;

// add dh to the current height

sizingObject[i]["object"].style.width=sizingObject[i]["currentWidth"]+"px";

// set the target width to the current width

sizingObject[i]["object"].style.height=sizingObject[i]["currentHeight"]+"px";

// set the target height to the current height

if (dw<1 && dw>-1 && dh<1 && dh>-1) {

// if the target is within a pixel of the desired dimensions

if (sizingObject[i]["expand"]) {

// if expanding

sizingObject[i]["object"].style.display="block";

// set the target to it's native state

sizingObject[i]["object"].style.overflow='visible';

// set the target to show all it's contents

sizingObject[i]["object"].style.width=sizingObject[i]["object"].style.height='';

// remove the targets dimension settings

}else{

// if collapsing

sizingObject[i]["object"].style.display="none";

// stop displaying the target

}
sizingObject.splice(i,1);

// remove the completed target from the array

}

} if (sizingObject.length>0) {

// if the sizingObject array is not empty

expandTimer = setTimeout("grow()",expandInterval);

// reset the timer

}else{

// if the sizingObject array is empty

expandTimer = null;

// nullify the timer

}

This code is used to operate the menu system on the left of this page and the 'Contact', 'Register' and 'Login' areas to the top.