Flexible Content Expanding and Collapsing Plugin - jQuery Collapse

Collapse is a simple, lightweight and flexible jQuery Plugin that allows you to expand or collapse content to save space and reduce the load time.

Features:

• Accordion Behaviour Supported.
• Works with CSS3 Animations.
• Remembers the toggle state on page reload using local storage or cookies.
• Compatible with all major browsers.

Basic Usage:

1. Include jQuery and jQuery Collapse in your page.

<!-- Required -->
<script src="jquery.min.js"></script>
<!-- Core -->
<script src="src/jquery.collapse.js"></script>
<!-- Cookies -->
<script src="src/jquery.collapse_cookie_storage.js"></script>
<!-- Local Storage -->
<script src="src/jquery.collapse_storage.js"></script>

2. Create trigger elements and toggleable content into a container with the data-collapse attribute. That's it.

<div id="demo" data-collapse>
  <h2>Fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
  </ul>
  <h2>Info</h2>
  <div>
    <p>You can use any container you like (in this case a div element)</p>
  </div>
</div>

3. Enable the Accordion mode.

<div id="demo" data-collapse="accordion">
  ...
</div>

4. Persist the toggle state.

<div id="demo" data-collapse="persist">
  ...
</div>

5. You can also initialize the plugin via JavaScript as follows:

$(".demo").collapse({

  accordion: false,
  persist: false

});

6. Callback functions which will be fired on open/close.

$(".demo").collapse({

  open: function() {
    // do something
  },
  close: function() {
    // do something
  }

});

Changelog:

2020-02-04

• Doc updated

---

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