Lightweight Collapsible Accordion Menu Plugin - collapsible

collapsible is a very small jQuery plugin used to create a vertical collapsible or accordion menu that allows the visitor to open multiple (or single) menu items at the same time.

How to use it:

1. Load jQuery library and the jQuery collapsible plugin's JS & CSS files in the html document.

<link href="collapsible.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="jquery.collapsible.js"></script> 

2. Create menu headers and body following the markup structure like this:

<div id="demo" class="collapse-container">
  <h3>
    <span class="arrow-r">
    </span>
    First Heading
  </h3>
  <div>
    <p>First Section</p>
  </div>
  <h3>
    <span class="arrow-r">
    </span>
    Second Heading
  </h3>
  <div>
    <p>Second Section</p>
    <p>Second Section</p>
  </div>
  <h3>
    <span class="arrow-r">
    </span>
    Third Heading
  </h3>
  <div>
  </div>
</div>

3. Initialize the plugin to create a default collapsible menu.

$('#demo').collapsible();

4. Initialize the plugin to create an accodrion menu.

$('#menu').collapsible({
  accordion: true
});

5. Open a specified menu item on page load.

$('#menu').collapsible({
  contentOpen: 0 // menu item 1
});

6. More configuration options with default values.

$('#menu').collapsible({
  
  // animation options
  animate: true
  accordionUpSpeed: 400,
  accordionDownSpeed: 400,
  collapseSpeed: 400,

  // CSS classes for arrows
  arrowRclass: 'arrow-r',
  arrowDclass: 'arrow-d',
  
});

Change log:

2017-06-01

• CSS update

---

This awesome jQuery plugin is developed by jordnkr. For more Advanced Usages, please check the demo page or visit the official website.