Magento – Use slide animation for opening tabs or accordions

jquerymagento2widget

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!

Best Answer

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

Related Solutions

Magento2 – How to Use Tabs Widget

You have error on the page because you miss your tabs widget in dependencies list (at list if you want to use Magento's tabs widget).

Correct:

require([
    'jquery',
    'mage/tabs'
], function($){

But I can suggest more convenient way:

<div data-mage-init='{"mage/tabs":{}}'>
    <ul>
        <?php foreach ($_additional as $_key => $_data): ?>
            <li data-role="title"><a href="#tabs-<?php echo $_key ?>">...
        <?php endforeach; ?>
    </ul>
    <?php foreach ($_additional as $_key => $_data): ?>
        <div id="tabs-<?php echo $_key ?>" data-role="content">
            ...
        </div>
    <?php endforeach; ?>
</div>

mage/tabs.js will be loaded by Magento's App and initialized on needed element.

Magento – Add animation to product tabs (or any jquery widget)

Cannot find a way to do it with the animate attribute, so did it like this. If someone has a solution how to do it natively with data attributes please post an answer.

    $.prototype.addEffectonCollapsible = function(childElementThatIsClicked,closeEffect,showeffect,speed){
        this.on('click',childElementThatIsClicked, function (event) {
            var parentIdOfClickedElement = $(this).parent('.title');
            $('.product.items .title').removeClass("active");
            $(this).parent('.title').siblings('.content').filter(":visible")[closeEffect](speed, function(){
                parentIdOfClickedElement.addClass("active");
                parentIdOfClickedElement.next('.content')[showeffect](speed);
            });
            return false;
        })
    }
    $(window).on('load resize', function() {
        if($(window).width() > 1024){
            $('.product.items [data-role="collapsible"]').addEffectonCollapsible(".switch","fadeOut","fadeToggle","slow")
        }
        else{
            $('.product.items [data-role="collapsible"]').addEffectonCollapsible(".switch","slideUp","slideToggle","slow")
        }
    })

Related Topic

Magento 2 – Why Luma Sample Uses Widget and Block for Home Page