jQuery Collapsible Plugin Demo/FAQ

Close All | Open All
Overview

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 v1.10.1 and Cookie plugin 1.3.1.

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

Add HTML

You have to create your own html for the collapsible. You need a header element (here as div, 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. Here is an example:

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

Add the JavaScriptusing, 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>
 
Default Options

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
  • loadOpen - custom callback to override the default open state
  • loadClose - custom callback to override the default close state
Plugin Methods

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
  • openAll - open all closed containers
  • closeAll - close all opened containers

Call them using jquery-ui style:

$(selector).collapsible('method', [arg]);
if ( $('#nav-block').collapsible('collapsed') ) {
    // code here
}
appendToLog('Error: service is down!');
$('#nav-logs').collapsible('open');
    
Custom CSS

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 div.collapse-open {}
.collapsible div.collapse-close {}
.collapsible div.collapse-open span {}
.collapsible div.collapse-close span {}
    
Demo CSS

@CHARSET "UTF-8";
#navigation {
    width:250px;
}

#content {
    width:700px;
}

#navigation,
#content {
    float:left;
    margin:10px;
}

.collapsible,
.page_collapsible {
    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;
}

.collapse-open {
    background:#000;
    color: #fff;
}

.collapse-open span {
    display:block;
    float:right;
    padding:10px;
}

.collapse-open span {
    background:url(images/minus.png) center center no-repeat;
}

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