Yii 1.1: ecollapse

jQuery based collapsible content widget
14 followers

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.

Total 5 comments

#11358 report it
__construct() at 2013/01/08 10:45pm
"bug"

@Luke_Jurgs Thank you for your reply.

I solved this problem by my custom js code. Will wait for the new version.

#11323 report it
Luke Jurgs at 2013/01/05 11:01pm
"bug"

@__construct

I actually ran into this problem myself when I was writing a recent project with Bootstrap and I do intend on releasing a new version that is bootstrap friendly. Unfortunately that will possibly break backwards compatibility.

If you would like to avoid the problem without rewriting any code, just download a custom bootstrap and uncheck any collapsible options.

#11322 report it
__construct() at 2013/01/05 10:29pm
This extension is incompatible with Twitter Bootstrap

I found a bug in this extension.

There is a problem with JS: "collapse" function in jQuery is already defined by bootstrap.

You shoud rename "collapse" function to solve this conflict:

Here is example (jquery.collapse.js):

wrong code:

(function($) {
// Use a cookie counter to allow multiple instances of the plugin
var cookieCounter = 0;
$.fn.extend({
collapse: function(options) {
 
.....
.....

correct code:

(function($) {
// Use a cookie counter to allow multiple instances of the plugin
var cookieCounter = 0;
$.fn.extend({
ecollapse_collapse: function(options) {
 
.....
.....

After that I recommend also change function names in jquery.cookie.js and so on.

Thank you.

#7196 report it
Luke Jurgs at 2012/03/02 05:26pm
@cephyn

Sorry about that, I accidentally included another library of mine in the code, please try the latest version (0.0.2), I have applied a fix.

#7195 report it
cephyn at 2012/03/02 03:11pm
Does not work

Line 140, $groups = Strings::trim($groups);

It is unable to find Strings. Any ideas? Would love to use this.

Leave a comment

Please to leave your comment.

Create extension