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 Feb 27 at 12:47
  • Tried this and I didn't change anything. I also tried the same animate options with the accordion widget. – mlunt Feb 27 at 14:27

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"}}}'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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