Minimal jQuery Smooth Collapsible Panel Plugin - Content Collapse

Content Collapse is a super tiny jQuery plugin to smoothly collapsible & expand content by clicking the panel header, which acts as an accordion.

How to use it:

1. Include jQuery library and the jQuery content collapse plugin in your web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="contentCollapse.js"></script>

2. Include the jQuery easing plugin for custom easing effects (OPTIONAL).

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Wrap the collapsible content and the toggle link into a container with CSS class of 'content-collapse'.

<div class="content-collapse"> <a data-toggle>Toggle</a>
  <div class="content">
    <p>Your content goes here</p>
  </div>
</div>

4. Initialize the plugin with default options.

contentCollapse.init();

5. Style the collapsible panel whatever you like.

.content-collapse {
  border: 1px solid #ecf0f1;
  border-radius: 5px;
  margin-top: 15px;
  background-color: #e74c3c;
}

.content-collapse [data-toggle] {
  display: block;
  padding: 20px;
  cursor: pointer;
  backface-color: #c0392b;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.content-collapse .content {
  display: none;
  border-top: 1px solid #e74c3c;
  padding: 10px 20px;
  background-color: #ecf0f1;
}

.content-collapse .open { display: block; }

6. Options and defaults.

fireSelector: '[data-toggle]',
contentSelector: '.content',
openClass: '.open',
animate: true,
duration: 300,
easing: 'swing'

---

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