jQuery Collapsible Plugin Demo/FAQ

• FAQ
• Custom Animation
• Accordion Plugin

This plugin enables multiple collapsibles, and can use cookies to persist the collapsed/opened panels inbetween pages or visits. This plugin works with the latest jQuery release 1.5.

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

You have to create your own html for the collapsible. You need a header element (here as h3, can be 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, also i have added classes to aid with styling the collapsible, the containers do not have to have these class names. Note that there is a slight jump on some panels due to the way jQuery handles slideUp and slideDown, see the custom animation link in the side nav for better sliding. Here is an example:

<h3 class="collapsible" id="section1">Heading<span></span><h3>
<div class="container">
	<div class="content">
		<h3>Sample Content</h3>
		<p>Content here....</p>
	</div>
</div>
<h3 class="collapsible" id="section2">Heading<span></span><h3>
<div class="container">
	<div class="content">
		<h3>Sample Content</h3>
		<p>Content here....</p>
	</div>
</div>
<h3 class="collapsible" id="section3">Heading<span></span><h3>
<div class="container">
	<div class="content">
		<h3>Sample Content</h3>
		<p>Content here....</p>
	</div>
</div>

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.

<script type="text/javascript" src="javascript/jquery.cookie.js"></script>
<script type="text/javascript" src="javascript/jquery.collapsible.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//collapsible management
		$('.collapsible').collapsible({
			defaultOpen: 'section1,section3'
		});
	});
</script>

The plugin default options are as follows:

{
    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);
    }
}

Details

• cssClose - class assigned when closed
• cssOpen - class assigned when opened
• cookieName - cookie name for persisting panels
• cookieOptions - see jquery.cookie plugin for more info
• defaultOpen - comma separated list of header ids
• speed - animation speed
• bind - event that triggers the collapsible, only 4 are supported:
  click, dblclick, mouseenter, and mouseover
• animateOpen - custom callback to animate opening
• animateClose - custom callback to animate closing

These are the methods available from the plugin:

• cssClose - class assigned when closed
• collapsed - returns 'true' if element is collapsed
• toggle - toggle collapsible state
• open - open a collapsible
• close - close a collapsible

Call them using jquery-ui style:

$(selector).collapsible('method', [arg]);

if ( $('#nav-block').collapsible('collapsed') ) { ... }

appendToLog('Error: service is down!');
$('#nav-logs').collapsible('open');

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.

.collapsible h3.collapse-open {}
.collapsible h3.collapse-close {}
.collapsible h3.collapse-open span {}
.collapsible h3.collapse-close span {}

@CHARSET "UTF-8";
#left_nav {
    width:250px; }
#body {
    width:700px; }
#left_nav,
#body {
    float:left;
    margin:10px; }
.collapsible,
.page_collapsible,
.accordion {
    margin: 0;
    padding:10px;
    height:20px;
    border-top:#f0f0f0 1px solid;
    background: #cccccc;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    font-size:1em; }
.accordion-open,
.collapse-open {
    background:#000;
    color: #fff; }
.accordion-open span,
.collapse-open span {
    display:block;
    float:right;
    padding:10px; }
.accordion-open span,
.collapse-open span {
    background:url(../images/minus.png) center center no-repeat; }
.accordion-close span,
.collapse-close span {
    display:block;
    float:right;
    background:url(../images/plus.png) center center no-repeat;
    padding:10px; }
div.container {
    padding:0;
    margin:0; }
div.content {
    background:#f0f0f0;
    margin: 0;
    padding:10px;
    font-size:.9em;
    line-height:1.5em;
    font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }
div.content ul, div.content p {
    padding:0;
    margin:0;
    padding:3px; }
div.content ul li {
    list-style-position:inside;
    line-height:25px; }
div.content ul li a {
    color:#555555; }
code {
    overflow:auto; }