lavoiesl / jquery-autocollapser
Small jQuery plugin that collapses a box on a toggle
Installs: 8
Dependents: 0
Suggesters: 0
Security: 0
Stars: 4
Watchers: 2
Forks: 0
Open Issues: 0
Language:JavaScript
Type:jquery-plugin
This package is not auto-updated.
Last update: 2022-07-18 08:52:07 UTC
README
Author
Sébastien Lavoie (sebastien@lavoie.sl)
Description
Simple solution to a common problem:
- Easy binding for the toggle of collasped/expanded of a selector
- Provides an API to show/hide/toggle
- Adds classes collapse-{expanded,collapsed} on the wrapper
Much can be done, but this is the first version
Prerequisites
- jQuery, should work with any version but tested with 1.7
Basic setup
<div class="collapse-wrapper"> <div class="header"> <a href="#" class="collapse-toggle">Toggle</a> </div> <div class="collapse-box"> <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> </ul> </div> </div>
Initialization
$(function() { $('.collapse-wrapper').autoCollapser(); });
Options
{ box: '.collapse-box', // The box that will be collasped toggle: '.collapse-toggle', // The trigger, binding will be added onClick collapsedClass: 'collapse-collapsed', // Class to be added to the wrapper when it is collapsed expandedClass: 'collapse-expanded', // Idem duration: 800, // Speed in ms for the animation, stop: true // Empty the queue using .stop(true, true) }
CSS Example
.collapse-wrapper { border: 1px solid green; padding: 10px; margin: 10px; } .collapse-expanded .collapse-toggle::after { content: " -" } .collapse-collapsed .collapse-toggle::after { content: " +" } .collapse-box { border: 1px solid red; margin: 10px; }
API
$('.collapse-wrapper').autoCollapser('show'); $('.collapse-wrapper').autoCollapser('hide'); $('.collapse-wrapper').autoCollapser('toggle');
Events
Two events are made and they both pass the data.show as a boolean
- autoCollapser.toggle.start
- autoCollapser.toggle.after
$('.collapse-wrapper').on('autoCollapser.toggle.start', function(event,data){ console.log("Collapser has started " + (data.show ? 'expanding' : 'collasping')); }); $('.collapse-wrapper').on('autoCollapser.toggle.after', function(event,data){ console.log("Collapser was " + (data.show ? 'expanded' : 'collasped')); });
Demo
Checkout the demo