Flexible Content Expanding and Collapsing Plugin - jQuery Collapse

File Size: 96.9 KB
Views Total: 8371
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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>
    <p>You can use any container you like (in this case a div element)</p>

3. Enable the Accordion mode.

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

4. Persist the toggle state.

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

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


  accordion: false,
  persist: false


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


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




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