----------------No longer being Maintained--------------------

Collapsible, jQuery Plugin

Overview:

This plugin enables site owners to control multiple collapsible panels by auto opening any defaults specified, and keeping those opened/closed by users as they left them while browsing your site.

If you find any errors or have suggested changes, please post a comment on the github project: http://github.com/juven14/Collapsible

Very Basic demos can be found here: http://www.snyderplace.com/demos/collapsible.html

To enable cookie support you'll need the Cookie plugin here: https://github.com/carhartl/jquery-cookie

================================================================================

Adding a collapsible panel to your html:

You have to create your own html for the collapsible. You need a header element (div or etc) that gets the "collapsible" class assigned and a body element. However, the slide effect will be choppy if you have margins and padding for the container, so here we just use a div. Here I've used "collapsible" but you can choose any other selector. Here is an example:

---HTML code--------------------------------------------------------------------

---end HTML code----------------------------------------------------------------

================================================================================

Adding the Javascript to your file:

JavaScript which belongs in the head of the html document, using the cookie plugin is optional. Please note that our default open / config is only an example as related to the above HTML.

---JavaScript code--------------------------------------------------------------

---end JavaScript code----------------------------------------------------------

The plugin default options are as follows: ---JavaScript code-------------------------------------------------------------- { cssClose: 'collapse-close', cssOpen: 'collapse-open', cookieName: 'collapsible', cookieOptions: { path: '/', expires: 7, domain: '', secure: '' }, defaultOpen: '', speed: 300, bind: 'click', animateOpen: function (elem, opts) { elem.next().slideUp(opts.speed); }, animateClose: function (elem, opts) { elem.next().slideDown(opts.speed); }, loadOpen: function (elem, opts) { elem.next().show(); }, loadClose: function (elem, opts) { elem.next().hide(); } } ---end JavaScript code----------------------------------------------------------

Option details:

• cssClose - This is the class you want assigned when it is closed.
• cssOpen - This is the class you want assigned when it is opened.
• cookieName - This is the name of the cookie that will store which collapsibles should be open.
• cookieOptions - See the jquery.cookie plugin for more information.
• defaultOpen - This is comma separated list of collapsible header ids.
• speed - This is the animation speed for the slide up/down.
• bind - This is the event that you want the collapsibles to function on. only 4 are supported: click, dblclick, mouseenter, and mouseover.
• animateOpen - This is a custom callback to alter the way that an element is opened.
• animateClose - This is a custom callback to alter the way that an element is closed.
• loadOpen = This is a custom callback to override the default open state
• loadClose = This is a custom callback to override the default close state

Methods:

You can call following methods on collapsible elements:

• collapsed - returns 'true' if element is collapsed
• toggle - toggle collapsible state
• open - open a collapsible
• close - close a collapsible
• openAll - open all closed collapsibles
• closeAll - close all open collapsibles

Call them using jquery-ui style: $(selector).collapsible('method', [arg]);

Examples: if ( $('#nav-block').collapsible('collapsed') ) { ... } or appendToLog('Error: service is down!'); $('#nav-logs').collapsible('open');

================================================================================

Styling

In the above example HTML you will see a span, this is useful if you wish to assign an open/close image.

This plugin will append a user defined (or default, see options above) class to header of the collapsible. You can use this to swap out the images or style the different states of your collapsible.

---CSS code--------------------------------------------------------------------- .collapsible div.collapse-open {} .collapsible div.collapse-close {}

.collapsible div.collapse-open span {} .collapsible div.collapse-close span {} ---end CSS code-----------------------------------------------------------------

================================================================================