0

When my product page loads the first tab is active:

tab1

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

tab2

2 Answers 2

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>
1
  • is there a faster way to open the tab besides waiting for all the ajax to complete? Aug 20, 2020 at 22:07
0

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

    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.