I'm trying to update the product tabs/accordions to animate when I select them. I've removed the tab styling and adjusted them so they are accordions that open up and down on the page. I'd like to have them slide open with a small amount of transition duration, but I can't figure out the animate property for the accordion widget.

I've tried a handful of property variations based on this documentation and I can't figure out what I'm missing. It's based on jQuery.animate(). https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_tabs.html#fedg_tabs_options.

Some of the things I've tried:

1. $("#product-details-accordion").accordion({ "animate":{"easing": "easeOutExpo", "duration":"350"} }); 
2. $("#product-details-accordion").accordion({ "animate": { "display": "block", "easing": "swing", "duration": 500 } });
3. $("#product-details-accordion").accordion({ "animate": { "height": "100%", "easing": "swing", "duration": 500 } });

Thanks in advance for any suggestions!

  • Try collapsible widget like this : $("#element").collapsible({ animate: {duration:1000,easing:"easeOutCubic"});
    – Sejal Shah
    Commented Feb 27, 2019 at 12:47
  • Tried this and I didn't change anything. I also tried the same animate options with the accordion widget.
    – mlunt
    Commented Feb 27, 2019 at 14:27

2 Answers 2


Finally figured this out, but not in the way that I was hoping. My goal was to do this in my .js file, but I could only get the animation to work but putting the animation in the data-mage-init object in my .phtml file. Here is the line of code that did the trick data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": 1, "multipleCollapsible": true, "animate":{"duration":"400"}}}'


This is possible in the JS file by using the below snippet...

    'accordion'], function ($) {

            multipleCollapsible: true,
            collapsible: true,
                duration: 400

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.