Fork me on GitHub

Collapsible.js

A lightweight jQuery plugin for collapsible menus

What is it...?

Collapsible.js is a lightweight jQuery plugin that was created with the intent to expand on the functionality of the accordion effect found in jQuery UI.

What do I need...?

To get started with collapsible.js all you need is the source script, and a reference to jQuery. After you have downloaded collapsible.js and put it in your desired directory, you will be able to use a setup similar to the one seen below:

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.collapsible.js"></script>

Please note, you may need to modify these to better suit your specific project.

How do I use it...?

Simple example of the HTML needed:

<div id="first">
  <h1>First Heading</h1>
  <div>
    <p>First Section Content</p>
  </div>
  <h2>Second Heading</h2>
  <div>
    <p>Second Section Content</p>
  </div>
</div>

Some examples of how to use it:

$('#first').collapsible('accordion-open', {
  contentOpen: 1
});
$('#second').collapsible('accordion', {
  animate: false
});
$('#third').collapsible('accordion');
$('#fourth').collapsible('default-open');
$('#fifth').collapsible({
  animate: false
});
$('#sixth').collapsible();

All of the options available:

/* Speeds for opening */
accordionUpSpeed: 400,
accordionDownSpeed: 400,
collapseSpeed: 400,
/* Default pane open, if any */
contentOpen: 0,
/* Classes for dropdown arrow */
arrowRclass: 'arrow-r',
arrowDclass: 'arrow-d',
animate: true

Examples

Accordion - Open Panel

First Heading

First Section

Second Heading

Second Section

Second Section

Third Heading

Third Section

Second Section

Accordion - No Animation

First Heading

First Section

Second Heading

First Section

Second Section

Third Heading

First Section

Second Section

Accordion - Basic Animation

First Heading

First Section

Second Heading

First Section

Second Section

Third Heading

First Section

Second Section

Default - Open Panel

First Heading

First Section

Second Heading

First Section

Second Section

Third Heading

First Section

Second Section

Default - No Animation

First Heading

First Section

Second Heading

First Section

Second Section

Third Heading

First Section

Second Section

Default - Basic Animation

First Heading

First Section

Second Heading

First Section

Second Section

Third Heading

First Section

Second Section