Minimal jQuery Smooth Collapsible Panel Plugin - Content Collapse

File Size: 4.64 KB
Views Total: 3848
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="contentCollapse.js"></script>

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

<script src="//"></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>

4. Initialize the plugin with default options.


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.