jQuery Collapse

Features:

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 are no CSS file included within this plugin for default styling, so you can use demo.css file from 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