1. Changelog
2. Requirements
3. Usage
4. Resources
5. Todo

Wraps the jQuery Collapse plugin in a widget.

ecollapse github repository

You may be wondering why I created yet another collapsible extension, so I will give a short rationale.

• The jQuery-Collapse plugin has a very liberal OSS licence.
• I needed a plugin that supported custom hide and show callbacks.
• I like the way it remembers user preferences for showing and hiding content in a cookie.

Changelog ¶

• As of version 0.0.4 the options 'arrowSet', 'arrowSize' and 'arrowPosition' have been added. They only impact those users without custom css.
• As of version 0.0.3 the 'cookieEnabled' option has replaced using 'false' as the 'cookieName' to disable cookie support.

Requirements ¶

jQuery 1.4.2

Yii 1.1 (only tested under 1.1.10)

Usage ¶

The following examples assume the extension files can be found under: "extensions/ECollapse/"

Basic usage is as follows:

<div class="collapse">
    <h3>Fruits</h3>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
    <h3>Vegetables</h3>
    <ul>
        <li>Carrot</li>
        <li>Tomato</li>
        <li>Squash</li>
    </ul>
    <h3>Colors</h3>
    <ul>
        <li>Green</li>
        <li><a href="http://en.wikipedia.org/wiki/Yellow">Yellow</a></li>
        <li><a href="http://en.wikipedia.org/wiki/Orange_(colour)">Orange</a></li>
    </ul>
</div>

<?php $this->widget('ext.ECollapse.ECollapse'); ?>

The above example uses defaults and will collapse all the "ul" blocks under .collapse and make them expandable using the headers "h3".

There are a great many customizations possible:

<?php
$this->widget('ext.ECollapse.ECollapse', array(
//custom show function
'show' => 'js:function(){this.show();}',
//custom hide function
'hide' => 'js:function(){this.hide();}',
//change the clickable heading
'head' => 'h1',
//change the group to hide
'group' => 'p, span',
//disable cookie support
'cookieEnabled' => false,
//change the cookie name if in use
'cookieName' => 'cookie',
//change the root selector
'selector' => '#idhere',
//don't start in a collapsed state
'collapsed' => false,
//change the speed of the default animations (a integer or 'fast'/'slow'), wont work for custom show/hide functions
'duration' => 'slow',
//use your own css instead
'cssFile' => 'css/mycss.css',
//arrowSet ('a', 'b', 'c');
'arrowSet' => 'a',
//arrowSize ('small', 'medium', 'large')
'arrowSize' => 'small',
//arrowPosition ('left', 'right'), of the head element
'arrowPosition' => 'left',
));
?>

There is also a graceful way to hide blocks and stop flickering at page load by adding the class "hide" to the collapsible group elements. (it degrades so it wont hide these blocks if the user has javascript disabled)

In addition you can force a group element to show or hide by adding the classes "active" or "inactive" respectively to the head element related to the block you wish to make collapsible. These settings will be ignored if you have cookie support on and a state is set.

Resources ¶

github repo for this extension: ecollapse github repository

Original jQuery plugin page: jQuery Collapse

Todo ¶

I've reached the point with this now that I am open to any suggested changes or feature requests.