Source Code of: collapsible_elements.htm
Date Last Modified: May 02, 2009 - 01:59:19 AM
Size: 4 KB  |  141 lines  |  4,329 characters
<!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>

A Derivative Work of: PHP Source Code Utility - Version 1.0.0 Copyright © 0php.com 2002.