<!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>
|