Minimal jQuery Smooth Collapsible Panel Plugin - Content Collapse
File Size: | 4.64 KB |
---|---|
Views Total: | 3830 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.