domCollapse

domCollapse allows you to collapse and expand parts of page by activating other parts of a page.

To define a element that expands or collapses others add the class trigger to it as an attribute. This will automatically collapse the next following element in the document tree and add the functionality to alternately collapse and expand it.

The collapsing and expanding is achieved by adding and removing classes from the elements. This means you do not need to know any Javascript to make domCollapse behave differently.

To install domCollapse, simply add it to the head of your HTML document:

<script type="text/javascript" src="domcollapse.js"></script>

domCollapse adds itself to the onload event of the current window, and does not overwrite other scripts. It is fully self-contained in one big object.

domCollapse checks if the browser is capable of collapsing and expanding elements and only applies the functionality if that is the case.

Using domCollapse with your HTML/CSS

To use domCollapse in your pages simply add the class trigger to any element, and it will be converted into a clickable element that collapses and expands the following element.

If you want the element to become a trigger, but avoid initially collapsing the following element use the class expanded.

Out-of-the-box, domCollapse checks every element in the document for these class, which might be a bit slow when you deal with very large documents. To cut down the looping time, you can define which elements to check for the class by changing the triggerElements attribute:

triggerElements:'*'

For example, if you want to turn all headers level 2 into triggers, you add the trigger class to them and use:

triggerElements:'h2'

If you want to only collapse all h2 inside the element with the ID 'content', then you need to change two attributes:

triggerElements:'h2',
parentElementId:'content',
		

If you want to allow only one of the triggers to be expanded and collapse all the others, you can set the uniquecollapse attribute to true:

uniqueCollapse:true,

Styling domCollapse

domCollapse functions by adding and removing classes to the elements in question rather than setting the style attributes directly. This gives you full control over the look and feel by changing your CSS:

trigger

defines the look of the trigger element when the target element is collapsed.

expanded

defines the look of the trigger element when the target element is expanded.

show

defines the look of the target element when it is expanded.

hide

defines the look of the target element when it is collapsed.

Each of these names can be changed by changing the attributes at the beginning of the script.

The indicator images

domCollapse adds images to the trigger elements indicating that they are clickable and showing the state. The sources and alternative texts of these images are defined in the attribute section and default to:

plus.gif

indicating the collapsed state with the alternative text 'Expand section'.

minus.gif

indicating the expanded state with the alternative text 'Collapse section'.

The collapse and expand messages will also be applied as a title to the trigger elements

An example of the change in markup would be:

<h2 class="trigger">How to use <code>domCollapse</code></h2>
	<div>

Before domCollapse started and

<h2 title="collapse section" class="expanded">
<a href="#"><img alt="collapse section" src="minus.gif"></a>
How to use <code>domCollapse</code></h2>
	<div class="show">

after it was called for the first time.

domCollapse is provided as-is and the developer does not take any liability for any damage caused by it.

domCollapse is not open source, and it is prohibited to change and resell the script.

The use of the script is free.

Download domCollapse

• domCollapse.zip
• Version 3
• 06.12.2005 (Happy Birthday, Dad!)

Discuss domCollapse

• Check blog