domCollapse
What is 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.
How to install domCollapse
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.
How to use domCollapse
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.
Terms of Use
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!)
