<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Collapsible Boxes Test</title>
<style type="text/css">
.collapsed
{
display: none;
}
.expanded
{
display: block;
}
.collapsetrigger
{
cursor: hand;
}
</style>
<script type="text/javascript" language="javascript">
var init = new Array();
init[0] = new Function("{}");
function initBody()
{
var i;
for (i = 0; i < init.length; i++)
init[i]();
// end for
} // end function initBody
function addBodyOnload(funct)
{
init[init.length] = funct;
} // end function addBodyOnload
window.onload = initBody;
</script>
<script type="text/javascript" language="javascript">
function initCollapsibleDivs()
{
// check if DOM is available, return if not
if(!document.getElementsByTagName || !document.createTextNode){ return; }
// get an array of all div elements
var divs=document.getElementsByTagName('div');
// loop over array elements looking for a class name of 'collapsible'
for (var i=0; i<divs.length; i++)
{
if (divs[i] && divs[i].className &&
(divs[i].className.toLowerCase().indexOf('collapsible')!=-1
|| divs[i].className.toLowerCase().indexOf('expandable')!=-1 ))
{
// if it's collapsible, then it's initial state is expanded. if it's expandable
// then its initial state is collapsed
var childclass = (divs[i].className.indexOf('collapsible')!=-1 ? 'expanded' : 'collapsed');
// get all child divs of this div
var childdivs = divs[i].getElementsByTagName('div');
for (var j=0; j<childdivs.length; j++)
{
// add the child's class
//childdivs[j].className = childdivs[j].className.replace(/(collapsible)|(expandable)/, childclass);
childdivs[j].className = (childdivs[j].className==''?childclass:' '+childclass);
// set the child's id
childdivs[j].id = 'a'+ i +'_'+ j;
// insert the expand/collapse node before this child div
var p=document.createElement('p');
p.appendChild(document.createTextNode('Expand/Collapse'));
p.className = 'collapsetrigger';
eval("p.onclick = function(){toggleExpanded('a"+ i +"_"+ j +"');}");
divs[i].insertBefore(p, childdivs[j]);
}// end for
} // end if
} // end for
} // end initCollapsibleDivs
function toggleExpanded(id)
{
if (!document.getElementById || !document.getElementsByTagName) return;
// index of parent div
var pdividx = id.substring(1, id.indexOf('_'))-0;
// index of child div within parent div
var cdividx = id.substring(id.indexOf('_')+1)-0;
var oelement = document.getElementsByTagName('div')[pdividx].getElementsByTagName('div')[cdividx];
if (oelement && oelement != null)
{
// toggle expanded/collapsed
if (oelement.className && oelement.className != null)
oelement.className = (oelement.className.toLowerCase()=='collapsed'?'expanded':'collapsed');
else
oelement.className = 'collapsed';
// end if
} // end if
}
// add a call to this function to the list of functions called on page load
addBodyOnload(initCollapsibleDivs);
</script>
</head>
<body>
<h1>Using Page Divisions</h1>
<div class="collapsible another class">
<div class="another class">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam leo ante, vehicula tristique, egestas ut, commodo a, mauris. Aenean dictum elit ut sem. Sed ut lectus. Suspendisse non tellus. Sed mi leo, placerat vel, gravida et, facilisis et, ante. Integer augue est, semper nec, mattis id, facilisis et, tortor. Sed eu dolor eget nulla aliquam interdum. Nunc ante. Mauris nonummy placerat ante. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sed eros. Sed quis sem. Curabitur malesuada libero eu ante. Nulla nec ipsum. In vestibulum tempus orci. In laoreet molestie nisl. Fusce odio nulla, tincidunt vel, placerat nec, sollicitudin et, nulla.</p>
</div>
</div>
<div>
This is text below the collapsible element, to demonstrate that the element
actually collapses.
</div>
<p>
The parent and child DIVs in the collapsible segment can now have CSS classes unrelated to the collapsing feature, and it is not overwritten
(and still works).
</p>
</body>
</html>
|