Use slide animation for opening tabs or accordions

Question

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!

Answer 1

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

Answer 2

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

require([
    'jquery',
    'accordion'], function ($) {

    $("#product-details-accordion").accordion(
        {
            multipleCollapsible: true,
            collapsible: true,
            animate:{
                duration: 400
            }
        }
    );
});