Description:

Content Collapse was built to keep webpages small with out losing any content. Applied to a container element and specifing a "handle" element inside your container, Content Collapse allows users to toggle collapsing of a elements content.

This widget was built using the Mootools JavaScript framework as a base.

Features:

Ease of use: Content Collapse is great for novices, very easy to get running and very flexible with its minimal coding style.

CSS Class driven: Through the use of CSS classes coders have full control over styling of both closed and open states.

Custom Events: Content Collapse offers coders the chance to create their own custom events. Giving control and depth to the script, coders can style and add animations or effects to their hearts content during any state of the widget.

Documentation:

Implements:

Syntax:

Arguments:

1. containerElement - (mixed) A string ID of the Element containing that will be collapsable.
2. options - (options, optional) See below.

.

Options:

• closedClass - (string, defaults to closed) The Css class name used to signify the element is closed.
• openClass - (string, defaults to closed) The Css class name used to signify the element is open.
• collapseBarClass - (string, defaults to closed) The Css class name used to signify the element that will be used as the clickable collapse toggle handle.
• startEvent - (function) The function that will be executed when a collapse toggle is triggered.
• completeEvent - (function) The function that will be executed when a collapse toggle is finished.
• initEvent - (function) The function that will be executed when the script starts its initialization process.
• transition - (function, defaults to Fx.Transitions.Quad.easeInOut) Can be a Fx.Transitions function or a user-provided function which will be extended with easing functions..
• duration - (integer, defaults to 800) The duration of the effect in ms. Can also be one of:
  • 'short' - 250ms
  • 'normal' - 500ms
  • 'long' - 1000ms

.

Events:

-- initialize --

-- start --

-- complete --

Properties:

• state - (string) Returns either "open" or "closed" based on the elements current state.
• processing - (boolean) True if the element is in the process of collapsing or uncollapsing.

Element Native (this is the recommending method of implementation):

Syntax:

Example:

Html:

<div class="CollapsableContent">

<span class="collapseBar">
     <h3>Title of Content 1, or Image to funcation as handle</h3>

</span>
Lorem ipsum eum iisque blandit liberavisse ne.
Ius moderatius contentiones reprehendunt eu, et populo.
Sit omnis omittam disputationi te, mel in tation doctus.
</div>

<div class="CollapsableContent">
<span class="collapseBar">
     <h3>Title of Content 2, or Image to funcation as handle</h3>

</span>
Lorem ipsum eum iisque blandit liberavisse ne.
Ius moderatius contentiones reprehendunt eu, et populo.
Sit omnis omittam disputationi te, mel in tation doctus.
</div>

<div class="CollapsableContent closed">
<span class="collapseBar">
     <h3>Title of Content 3, or Image to funcation as handle</h3>

</span>
Lorem ipsum eum iisque blandit liberavisse ne.
Ius moderatius contentiones reprehendunt eu, et populo.
Sit omnis omittam disputationi te, mel in tation doctus.
</div>

JavaScript:

$$(".CollapsableContent").collapsableContent({
duration: 500,

collapseBarClass: "collapseBar"
});

Change Log:

-- No changes or updates have been made thus far --

Demo:

.demoCollapseElement {
overflow:hidden;

margin:5px;
width:600px;
}
.collapseHandle {

cursor:pointer;
border:2px ridge gray;
background-color: lightblue;

padding:5px;
}

window.addEvent('domready',function(){
$$('.demoCollapseElement').collapsableContent({

     duration:500,
     collapseBarClass: 'collapseHandle',
     closedClass: 'demoClosedElement',

     openClass: 'demoOpenedElement'
});
});

<div class="demoCollapseElement">

<div class="collapseHandle">
     Demo 1 - Random Content
</div>
<p>Lorem ipsum eum iisque blandit liberavisse ne.

Ius moderatius contentiones reprehendunt eu, et populo.
Sit omnis omittam disputationi te, mel in tation doctus.</p>
</div>

<div class="demoCollapseElement demoClosedElement">

<div class="collapseHandle">
     Demo 2 - Random Content With Closed class applied
</div>
<p>Lorem ipsum eum iisque blandit liberavisse ne.

Ius moderatius contentiones reprehendunt eu, et populo.
Sit omnis omittam disputationi te, mel in tation doctus.</p>
</div>

Download:

You can download the Mootools framework HERE.

Standard Version:

Standalone Version: