JS: Simple Accordion
/*
* Simple Accordion
*/
/***********************************************************
***********************************************************
1. add "open" class to show a selected element on page load
Markup:
<div class="accordion-container">
<div class="open">
<h2>Item 1</h2>
<div>Lorem ipsum dolor sit...</div>
</div>
<div>
<h2>Item 2</h2>
<div>Lorem ipsum dolor sit...</div>
</div>
</div>
Usage:
$('.accordion-container').simpleAccordion({
'accordionCollapseOthers': true
});
***********************************************************
***********************************************************/
(function ($) {
$.fn.simpleAccordion = function(options) {
var settings = $.extend({
accordionButton: 'h2', // Accordion Trigger
accordionContent: 'div', // Accordion Collapsible Content
accordionSpeed: 400, // Accordion Speed
accordionCollapseOthers: false // Control the display of other Accorion Elements in a group
}, options );
this.children().each(function() {
// Add Classes to wrapper, trigger and content
$(this).addClass('js-simple-accordion-item')
.children(settings.accordionButton).addClass('js-accordion-btn')
.next(settings.accordionContent).addClass('js-accordion-content');
// Default Display
if ($(this).hasClass('open')) {
$(this).removeClass('open').addClass('js-open');
} else {
$(this).children('.js-accordion-content').hide();
}
// Toggle Accordion Item
$(this).children('.js-accordion-btn').click(function() {
$(this).siblings('.js-accordion-content').slideToggle(settings.accordionSpeed)
.parent().toggleClass('js-open');
// Collapse Other Items
if(settings.accordionCollapseOthers == true) {
$(this).parent().siblings()
.removeClass('js-open')
.children('.js-accordion-content').slideUp(settings.accordionSpeed);
}
return false;
});
});
};
}(jQuery));