Save this as collapse.js
var expandedTriggerClass='triggerexpanded';
var normalTriggerClass='triggernormal';
var hoverTriggerClass='triggerhover';
var normalElementClass='elementnormal';
var collapsedElementClass='elementcollapsed';
var collapsedElements=new Array();
var triggerElements=new Array();
function domCollapse()
{
if(document.getElementById && document.createTextNode)
{
//parentElementId='collapsesection';
//triggerelements='div';
var triggerClass=/trigger/;
var elms,tohide,colobj,elementsToCheck,triggerelements,parentElementId;
elementsToCheck=triggerelements?triggerelements:'*';
if(parentElementId)
{
elms=document.getElementById('parentElementId').getElementsByTagName(elementsToCheck);
} else {
elms=document.getElementsByTagName(elementsToCheck);
}
for (i=0;i<elms.length;i++)
{
if(triggerClass.test(elms[i].className))
{
tohide=elms[i].nextSibling;
while(tohide.nodeType!=1)
{
tohide=tohide.nextSibling;
}
collapsedElements.push(tohide)
triggerElements.push(elms[i])
juggleClass(tohide,normalElementClass,0);
juggleClass(tohide,collapsedElementClass,1);
elms[i].colobj=tohide;
elms[i].onmouseover=function(){doTriggerHover(this);}
elms[i].onmouseout=function(){juggleClass(this,hoverTriggerClass,0);}
elms[i].onclick=function(){doDomCollapse(this,this.colobj);return false}
elms[i].className=elms[i].className+' '+normalTriggerClass;
}
}
}
}
function doTriggerHover(o)
{
if(!checkClass(hoverTriggerClass,o) && !checkClass(expandedTriggerClass,o))
{
juggleClass(o,hoverTriggerClass,1);
}
}
function doDomCollapse(o,t)
{
if(t)
{
if(checkClass(collapsedElementClass,t))
{
juggleClass(t,collapsedElementClass,0);
juggleClass(t,normalElementClass,1);
juggleClass(o,normalTriggerClass,0);
juggleClass(o,expandedTriggerClass,1);
}else{
juggleClass(t,normalElementClass,0);
juggleClass(t,collapsedElementClass,1);
juggleClass(o,expandedTriggerClass,0);
juggleClass(o,normalTriggerClass,1);
}
}
}
function doDomCollapseAll(state){
var i,o,t;
for(i=0;i<collapsedElements.length;i++){
t=collapsedElements[i];
o=triggerElements[i];
if(state==1){
juggleClass(t,collapsedElementClass,0);
juggleClass(t,normalElementClass,1);
juggleClass(o,normalTriggerClass,0);
juggleClass(o,expandedTriggerClass,1);
} else {
juggleClass(t,normalElementClass,0);
juggleClass(t,collapsedElementClass,1);
juggleClass(o,expandedTriggerClass,0);
juggleClass(o,normalTriggerClass,1);
}
}
}
function juggleClass(o,c,s)
{
if(s==0)
{
o.className=o.className.replace(c,'');
}
if (s==1 && !checkClass(c,o))
{
o.className+=' '+c
}
}
function checkClass(c,o)
{
var re=new RegExp('\\b'+c+'\\b');
return re.test(o.className);
}
window.onload=domCollapse;
Then include this in your page <head>
<script type="text/javascript" src="collapse.js"></script>
Now, you need a stylesheet with these elements (don't forget to link your page to the saved stylesheet).
.triggerexpanded{
cursor:pointer;
}
.trigger{
color:#ba4b4f;
font-weight:bold;
text-decoration:underline;
cursor:pointer;
}
.triggernormal{
cursor:pointer;
}
.triggerhover{
cursor:pointer;
color:#000000;
}
.elementnormal{}
.elementcollapsed{display:none;}
Now, here is an example of the way it works...
<div class="trigger">Expand or Collapse</div>
<div>Here is your text</div>
Anything with "trigger" as the class with expand the very next element, whether it is a div (as in this case) or even a table (it should work at least).
Go http://www.onlinetools.org/tools/domcollapse/ <there for more details and for credits...I can't even remember who deserves the credit on this one because I've found it on a few sites. I've edited it to fit my site, but you'll see at the site I linked you to that you can customize the stylesheet to do a lot of neat things. Have fun!