Skip to content

Instantly share code, notes, and snippets.

@BideoWego
Created March 23, 2016 04:36
Show Gist options
  • Select an option

  • Save BideoWego/159da96c541d657db88f to your computer and use it in GitHub Desktop.

Select an option

Save BideoWego/159da96c541d657db88f to your computer and use it in GitHub Desktop.
Small jQuery plugin to fold nested divs
// ----------------------------------------
// Folder jQuery plugin
// ----------------------------------------
// Usage:
//
// $('.folder.month').folder();
// $('.folder.year').folder({
// iconOpen: 'fa-folder-open',
// iconClosed: 'fa-folder'
// });
$.fn.folder = function(options) {
// Set default options
options = $.extend({
toggle: '.folder-toggle',
iconOpen: 'fa-minus',
iconClosed: 'fa-plus'
}, options);
// Initialize
var iconOpen = options['iconOpen'];
var iconClosed = options['iconClosed'];
// Toggle Link Icon
var toggleIcon = function(link) {
var $icon = $(link).find('.fa');
var currentIconClass, nextIconClass;
if ($icon.hasClass(iconOpen)) {
currentIconClass = iconOpen;
nextIconClass = iconClosed;
} else {
nextIconClass = iconOpen;
currentIconClass = iconClosed;
}
$icon.removeClass(currentIconClass)
.addClass(nextIconClass);
};
// Toggle Folder Slide Open/Closed
var toggleFolderSlide = function(link) {
var $folder = $(link)
.parent()
.parent()
.find('> div');
$folder.slideToggle();
};
// Link Click Event
var onClick = function(e) {
e.preventDefault();
toggleIcon(this);
toggleFolderSlide(this);
return false;
};
// Set click events
$(this).each(function(index, element) {
var $a = $(element).find(options['toggle']).first();
$a.click(onClick);
});
return this;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment