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

jquerymagento2tabswidgets

How would you add animation to product tabs in magento2?

i tried following the guide here:
http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_tabs.html#fedg_tabs_options-animate
, but it doesn't include any examples.

The product/view/details.phtml looks like this:

<div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
    <?php foreach ($detailedInfoGroup as $name):?>
        <?php
            $html = $layout->renderElement($name);
            if (!trim($html)) {
                continue;
            }
            $alias = $layout->getElementAlias($name);
            $label = $block->getChildData($alias, 'title');
        ?>
        <div class="data item title"
             aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"
             data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">
            <a class="data switch"
               tabindex="-1"
               data-toggle="switch"
               href="#<?php /* @escapeNotVerified */ echo $alias; ?>"
               id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">
                <?php /* @escapeNotVerified */ echo $label; ?>
            </a>
        </div>
        <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">
            <?php /* @escapeNotVerified */ echo $html; ?>
        </div>
    <?php endforeach;?>
</div>

I tried adding data-mage-init='{"collapsible":{ "active": false, "animate": {"easing": "easeInOutElastic"}, "collapsible": true}}' but it didn't work (all elements were visible at the same time).

The html is like this:

<div class="data item title active" aria-labeledby="tab-label-product.info.description-title" data-role="collapsible" id="tab-label-product.info.description" role="tab" data-collapsible="true" aria-controls="product.info.description" aria-selected="false" aria-expanded="true" tabindex="0">
                    <a class="data switch" tabindex="-1" data-toggle="switch" href="#product.info.description" id="tab-label-product.info.description-title">
                        Description                    </a>
                </div>

And also is it possible to change the animation depending window size? For mobile you would want it to slide up/down, but for desktop you want a fade in/out effect because the tabs are next to each other.

Best Answer

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