jQuery Plugin For Collapsible Content with CSS3 Transitions - cssCollapse

cssCollapse is a really simple jQuery plugin to create a collapsible content box for showing/hiding html elements with smooth sliding animations based on CSS3 transitions.

Licensed under the GNU General Public License v2.0.

Basic usage:

1. Download the plugin, copy and include the JavaScript file jquery.cssCollapse.js in your project.

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

2. Create a collapsible box containing a toggle button and the hidden content as follow.

<div class="wrapBoxContent">
  <div class="button cssCollapse-target">Toggle Button</div>

  <div class="cssCollapse-hiddenContent">
    <div class="innerText">
      Hidden Content
    </div>
  </div>
</div>

3. Initialize the plugin by calling the function on the content toggle button.

$('.button').cssCollapse();

4. Customize the plugin with the following options settings.

$('.button').cssCollapse({

  // enables accordion mode
  accordion: false,
  accordionContainer: 'accordionContainer',

  // CSS prefix
  prefix: 'cssCollapse-',

  // default selectors/classes
  targetClass: 'target',
  targetSelected: 'selected',
  hiddenContentClass: 'hiddenContent',
  collapseClass: 'is-open',
  accordionCloseLinkClass: 'closeAccordion',

  // custom icons
  iconClass: 'collapseIcons',
  iconOpen: 'diff-added',
  iconClose: 'diff-removed',

  // transition options
  transition: {
    behavior: false,
    duration: false,
    delay: false,
  },
  
  // dont scroll the page when the target is clicked
  noScrollClass: 'noScroll',

  // changes the text on click
  changeText: {
    changeTextClass: false,
    open: '',
    close: ''
  }

});

Changelog:

v3.2.0 (2019-09-10)

• Clean up
• CSS updated

2019-06-07

• new change text functionality

2017-02-26

• added more options.

2016-08-10

• accordion target area bigger for mobile resolutions

2015-12-18

• accordion icon fix

2015-09-02

• Works with icon font
• Added accordion mode
• Demo update

 

---

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