jQuery Plugin For Collapsible Content with CSS3 Transitions - cssCollapse

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.

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

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


4. Customize the plugin with the following options settings.

  // 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: ''



  • new change text functionality


  • added more options.


  • accordion target area bigger for mobile resolutions


  • accordion icon fix


  • 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.

  • Publication date: 07.06.2019
  • Source