jQuery – Collapser plugin

Features

• Very light-weight plugin, fast and simple.
• Can collapse any element within an document.
• Can add seperate classes for expanding and collapsing.
• Customized targeting elements.
• Callback functions.
• Predetection of collapsed elements.
• Can create accordion, list collapsers etc by adding a single additional line.
• Cross browser supported.

Demo

Click the button below to view the example and demonstrations of collapser plugin.

Download

Click the button below to download.

Documentation

Basic Usage

$('Element selector').collapser({
	target: 'next',
	targetOnly: null,
	effect: 'slide',
	changeText: true,
	expandHtml: 'Expand',
	collapseHtml: 'Collapse',
	expandClass: '',
	collapseClass:''
}, before_collapse_callback_function , after_collapse_callback_function);

Plugin properties

Jquery collapser consist of 8 properties for customizing the collapser.

target:

This property allows to target the collapsing element. Values accepted are:

• next – Collapses the next element.
• prev – Collapses the previous element.
• siblings – Collapses all siblings.
• Any element selector.

targetOnly:

This property is effective only when the target is set to next and prev elements. Accepted value is any element selector. This collapses next, prev elements only of the specified selector.

effect:

The effect of collapsing. Values accepted are:

• slide – For sliding effect.
• fade – For fade effect.

changeText:

Allows to change the collapsing the text. Values are true (to change text) and false (to not to change the text)

expandHtml:, collapseHtml:

Expand and collapse Html for the collapser

expandClass:, collapseClass:

Expand and collapse class for the collapser

Callback functions

More features can be added to collapser by using the callback functions. These can be named functions or anonymous functions

Example – Anonymous functions

$('Element selector').collapser({
	target: 'next',
	targetOnly: null,
	effect: 'slide',
	changeText: true,
	expandHtml: 'Expand',
	collapseHtml: 'Collapse',
	expandClass: '',
	collapseClass:''
}, function(){
	alert('Before collapse');
} , function(){
	alert(''After collapse');
});

Example – Named functions

$('Element selector').collapser({
	target: 'next',
	targetOnly: null,
	effect: 'slide',
	changeText: true,
	expandHtml: 'Expand',
	collapseHtml: 'Collapse',
	expandClass: '',
	collapseClass:''
}, beforeCallback, afterCallback);

function beforeCallback(){
	alert('Before callback');
}

function afterCallback(){
	alert('After callback');
}