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