Ad

Add Easing Effect To Accordion Opening / Closing

- 1 answer

I'm super new to JS but I wanted a really simple accordion so I built one. For some reason I am at a loss when trying to add an easing effect to the opening / closing of it. Any help would be much appreciated. Thank you!

CodePen of Accordion

js code:

(function(){
// This class will be added to the expanded item
var activeItemClass = 'accordion-expanded';
var accordionItemSelector = '.accordion-section';
var toggleSelector = '.accordion-head';

$(toggleSelector).on('click', function() { 

    $(this)
        .closest(accordionItemSelector) // go up to the accordion item element
        .toggleClass(activeItemClass)
            .siblings()
            .removeClass(activeItemClass);
});

})();
Ad

Answer

Since you're using jQuery, why not this:

var accordionItemSelector = '.accordion-body';
var toggleSelector = '.accordion-head';

$(toggleSelector).on('click', function() { 
  if (!$(this).next(accordionItemSelector).is(":visible"))
    $(toggleSelector).not($(this)).next(accordionItemSelector).slideUp();
  $(this).next(accordionItemSelector).slideToggle();   
});

UPDATED PEN

Ad
source: stackoverflow.com
Ad