anavdesign
4/22/2016 - 3:33 AM

JS: Simple Accordion

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));