How do I change the product page active tab on page load?

Question

When my product page loads the first tab is active:

How do I get the 2nd tab to be active on page load, so it looks like this?

Answer 1

You will need to create three files:

1 app/design/frontend/namespace/themename/requirejs-config.js

var config = {
    map: {
        '*': {
            opentab: 'js/opentab'
        }
    }
};

2 app/design/frontend/namespace/themename/web/js/opentab.js

Change name to the tab name you want to open on page load

define(['jquery'], function($){
   "use strict";
       return function opentab()
       {

            $(document).ajaxComplete(function() {
                $('#tab-label-name-title').click();
            });
       }
});

3 app/design/frontend/namespace/themename/Magento_Category/templates/product

<script type="text/javascript">
    require(['jquery', 'opentab'], function($, opentab) {
        opentab();
    });
</script>

Answer 2

The other answer takes a very long time to act.

I have found this way works better:

require(["jquery",'jquery/ui','tabs'], function($){
    $(function() {       
        var tabIndex = $('.product.data.items [data-role="content"]').index($('#tab-name'));
        
        $('#tab-label-tab-name').addClass("active");

        $('.product.data.items').tabs({
            active: tabIndex
        });

    });
});