Collapsible Component by William Chang

The collapsible component is simple and flexible that allows you to easily add collapsible panels to your web page.

Supported browsers: Microsoft Internet Explorer 6+, Mozilla Firefox 3+, Apple Safari 3+, Google Chrome 1+

Features

Easy and simple to apply to multiple panels.

Maintain collapsible state by CSS id.

Customizable through settings and CSS.

Attach callback functions to collapsible events.

Smooth fade effect and slide transition.

Demo

Page Time (24-hour): • Refresh This Page

Test Panel Header 1

Lorem ipsum dolor sit amet, sed id, augue curabitur integer, rutrum leo phasellus consequat varius donec purus. Eleifend morbi gravida aenean, aut per urna luctus blandit, sed fusce viverra non consequat auctor litora. Pellentesque molestie aliquam, in neque ipsum. Dictum libero nam conubia elit vestibulum etiam, auctor malesuada blandit a augue. Luctus amet, magna tempor vivamus rhoncus. Montes ridiculus condimentum, dignissim lorem risus. Lacus nunc placerat, urna sed risus diam nec, vel urna ante eget consequat ac velit, deserunt dictum tempus lobortis diam vulputate, vestibulum massa hac consequat.

Test Panel Header 2

Nibh hac, gravida eget, consectetuer est sit posuere. Mauris libero, amet id maecenas phasellus nibh sed proin, illo eu hendrerit neque egestas iaculis metus, dignissim et non interdum viverra et eu. Wisi pellentesque odio nunc dolore, velit turpis neque fermentum, a massa ante enim arcu, sed sit scelerisque leo vestibulum, tristique dictum. Praesent adipiscing mi quod suspendisse tortor tellus, augue mi tristique purus dolor nec maecenas, pede eu vestibulum, et et augue venenatis in sed. Mollis eget quam mauris ad, at vestibulum fusce mauris, id curabitur, lacus leo gravida. Sed lacus pellentesque, tortor ut in donec ut sapiente vitae, suspendisse curabitur eget in ipsum aliquet elit, duis sit rutrum est neque. Eget iusto, ut magna ut sapien justo, in pharetra vivamus potenti, metus rhoncus lacus lacus. Voluptates et scelerisque pellentesque id ac. Libero cras, libero morbi nullam sodales odio. Ante suspendisse enim vitae purus morbi amet, metus integer duis vivamus.

API and Options

You can pass options as key/value object to the component's function.

Key	Type	Default Value	Description
strPanelCss	string	panel_collapsible	The panel that surrounds the header and body markup structure. Requires a CSS class name.
strCollapsibleHeaderCss	string	panel_collapsible_header	The header of the collapsible panel. Requires a CSS class name.
strCollapsibleBodyCss	string	panel_collapsible_body	The body of the collapsible panel. Requires a CSS class name.
strCookieNamespace	string	domain_	The namespace is prepended to the generated cookie name. The cookie is used to save and restore collapsible state using the CSS id.
strCollapsibleDirection	string	vertical	The direction of the collapsible panel(s) to open and close.
fnLoad	function	null	Callback function after finishing setting up the collapsible panel(s).
fnBeforeStart	function	null	Callback function before the panel open/close.
fnAfterStop	function	null	Callback function after the panel open/close.

Key

Type

Default Value

Description

strPanelCss

string

panel_collapsible

The panel that surrounds the header and body markup structure. Requires a CSS class name.

strCollapsibleHeaderCss

string

panel_collapsible_header

The header of the collapsible panel. Requires a CSS class name.

strCollapsibleBodyCss

string

panel_collapsible_body

The body of the collapsible panel. Requires a CSS class name.

strCookieNamespace

string

domain_

The namespace is prepended to the generated cookie name. The cookie is used to save and restore collapsible state using the CSS id.

strCollapsibleDirection

string

vertical

The direction of the collapsible panel(s) to open and close.

fnLoad

function

null

Callback function after finishing setting up the collapsible panel(s).

fnBeforeStart

function

null

Callback function before the panel open/close.

fnAfterStop

function

null

Callback function after the panel open/close.

Usage

1. Include required dependencies.

<script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.cookie.js" type="text/javascript"></script> <script src="../js/diehard_collapsible.js" type="text/javascript"></script>

2. Add required markup structure using HTML.

<div id="region_panels"> <div class="panel"> <div class="panel_header">Test Header</div> <div class="panel_body">Test Body</ediv> </div> </div>

3. Add required style using CSS.

#region_panels .panel .panel_header_left {float:left;width:13px;height:13px;margin:2px 8px 0 0;background:url(../components/collapsible/panel_collapse.jpg) transparent no-repeat 0 0;cursor:pointer;} #region_panels .panel .collapsible_selected_hide .panel_header_left {background:url(../components/collapsible/panel_expand.jpg) transparent no-repeat 0 0;} #region_panels .panel .panel_header {cursor:pointer;} #region_panels .panel .panel_body {display:none;}

4. Add and run the code using JavaScript.

$('#region_panels').diehard_collapsible({ strPanelCss:'panel', strCollapsibleHeaderCss:'panel_header', strCollapsibleBodyCss:'panel_body', strCookieNamespace:'appname_' });

Downloads