Easy Cross-Browser Collapsible Divs Redux

Peter revisits an old friend, the "collapsible div", with an update and a new approach.

When you display content on a web page, you basically have just so much "real estate" above the fold before the visitor needs to start scrolling down. Statistics show that if you can show a clickable title that will expand / collapse to show its related content, this can be preferable to expecting your visitors to look for the scrollbar to page down.

A couple of years ago I put out something similar to this, but it was only Internet Explorer compliant and browsers like Firefox hadn't yet made it onto the scene. Now, with Firefox and IE comprising about 99% of our visitor traffic, the field gets narrowed down nicely.

The basic concept I use with this is twofold: First, we use the CSS display attribute to either show or hide the respective container div (or in this case it can also be a table row, "TR"):

<STYLE>
 .divHide {display:none; font-family:Arial;}
.divShow {display:block; font-family:Arial;}
</STYLE>


Style attributes like the above can be easily changed programmatically in a "toggleDiv" javascript function. The other aspect I employ here is the concept of "grouping" of similar content - even if it is in different places on the page - to have the same behavior, and I do this with a custom attribute. You can add any attribute you want to an element, even though it may be meaningless to the DOM, it will hand it back to you on demand with "getAttribute('attributeName')".

So, my toggleDiv function, complete with the "grouping" via custom attributes now looks like this:

function toggleDiv(elem)
        {
            var ndDiv = document.getElementsByTagName('div'); // handle divs             
            var    ndTr=document.getElementsByTagName('tr'); // handle tr's        
        
        var i=0;
        for( i=0;i<ndDiv.length;i++)
        {        
            if(ndDiv[i].className == 'divHide' && ndDiv[i].getAttribute(elem)=='yes' )
            {
              ndDiv[i].className = 'divShow';        
            }
            else if(ndDiv[i].className=='divShow' && ndDiv[i].getAttribute(elem)=='yes')
            {
              ndDiv[i].className = 'divHide'                
            }
        }

        for( i=0;i<ndTr.length;i++)
        {        
            if(ndTr[i].className == 'divHide' && ndTr[i].getAttribute(elem)=='yes' )
            {
             ndTr[i].className = 'divShow';        
            }
            else if(ndTr[i].className=='divShow' && ndTr[i].getAttribute(elem)=='yes')
            {
             ndTr[i].className = 'divHide'                
            }
        }
     }

The result is that we can easily have onclick handlers in a "container" element such as a div, which will expand or collapse related content all at the same time, even though they may be in different locations on the page.

Here is an example page that illustrates the technique. You can View Source on the page to get all the source code. 

By the way, in Firefox there is a minor rendering error that I've left in. You get first prize for being helpful by posting the fix.
By Peter Bromberg   Popularity  (2044 Views)