Magento 2 Tabs – Change Programmatically

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.

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