Flexible and Lightweight jQuery Accordion Plugin – jQuery Collapse

jQuery Collapse is a very lightweight and flexible jQuery accordion plugin that creates expandable and collapsible content easier for you. For more accessible to people with disabilities it has been designed with the supports of WAI-ARIA.

Features:

• Very lightweight.
• Very easy to implement, no coding experience is required. Just follow the steps below.
• Supports on all major browsers and devices.
• Remembers open sections on page reload using HTML5 localStorage or cookies!
• Accordion behavior can be toggled.
• WAI-ARIA supported.

How to use it:

1. Include the Javascript jquery.collapse.js at the bottom of the web page.

<script src="path/to/jquery.collapse.js"></script>

2. There is no CSS file included within this plugin for default styling, so you can use demo.css file from the demo folder or styling yourself as per the project requirements. Also, you can use the CSS from below.

.jq-accordion{ margin: 0; padding: 0;}
.jq-accordion h3{ margin: 0; padding: 0 0 0 20px; background: #9c9fff; color: #FFF; margin-top: 2px; position: relative;}
.jq-accordion h3::after{ content: '\f105'; font-family: FontAwesome; position: absolute; left: 20px; top: 7px; display: inline-block;}
.jq-accordion h3 a{ color: #FFF; padding: 8px 20px; display: block;}
.jq-accordion h3.open::after{ transform: rotate(90deg);}
.jq-content{ background: #FFF; padding: 25px;}

3. Add the basic HTML to the page and we’re ready to go.

<div class="jq-accordion" data-collapse="accordion">
  <h3 class="open">Fruits</h3>
  <div class="jq-content">
    <ul>
      <li>Apple</li>
      <li>Pear</li>
      <li>Orange</li>
    </ul>
  </div>
  <h3>Info</h3>
  <div class="jq-content">
    <p>You can use any container you like (in this case a div element)</p>
  </div>
</div>

JavaScript usage

$("#demo").collapse({
  // options...
});

Plugin’s default options:

function(){ this.show() }

function(){ this.hide() }

Example usage of options:

// Initializing collapse plugin
// with custom open/close methods,
// persistence plugin and accordion behaviour
$("#demo").collapse({
  open: function() {
    // The context of 'this' is applied to
    // the collapsed details in a jQuery wrapper
    this.slideDown(100);
  },
  close: function() {
    this.slideUp(100);
  },
  accordion: true,
  persist: true
});

Binding events

$("#demo").bind("opened", function(e, section) {
  console.log(section, " was opened");
});

$("#demo").bind("closed", function(e, section) {
  console.log(section, " was closed");
});

Triggering events

$("#demo").trigger("open") // open all sections
$("#demo").trigger("close") // close all sections
$("#demo h2 a").last().trigger("toggle") // toggle last section

API methods

var demo = new jQueryCollapse($("#demo")); // Initializing plugin
demo.open(); // Open all sections
demo.close(); // Close all sections
demo.open(0); // Open first section
demo.open(1); // Open second section
demo.close(0); // Close first section
demo.toggle(1); // Toggle second section