Magento 2 tabs - change programmatically

Question

I'm wondering how to exactly change tab (core mage/tabs widget) programmatically. Docs say that I can use both activate and enable functions for that: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_tabs.html

Unfortunately, no one is recognized.

Tabs are initialized as follows:

var tabs = $('.tabs'); tabs.tabs({ openedState: 'active-tab' });

Initialization and other base things work fine. The issue occurs when I would like to change tab programmatically:

tabs.activate('3'); // Uncaught TypeError: tabs.activate is not a function

I'm not sure what I am doing wrong.

How are you adding your JS? e.g via XML or Require? If you're using require what dependencies have you added? — Ben Crook
– Ben Crook, Commented Sep 28, 2017 at 13:44
JS is added by data-mage-init attribute in phtml file. This is my dependencies in define/require block: define([ 'jquery', 'matchMedia', tabs'], function ($, mediaCheck, tabs) { .. }); — Rob
– Rob, Commented Sep 28, 2017 at 14:13

Ben Crook · Accepted Answer · 2017-09-28 13:47:15Z

1

Inside vendor/magento/module-review/view/frontend/web/js/process-reviews.js:40 they are used like this:

$('.selector').tabs('activate', index);

answered Sep 28, 2017 at 13:47

15.8k4 gold badges53 silver badges105 bronze badges

Khodu Vaishnav · Accepted Answer · 2020-05-17 12:19:40Z

$('.product.data.items').tabs('activate', index);

index starting from 0

also you can check index by below code

$('.product.data.items [data-role="content"]').each(function (index) { alert(this.id+index); })

2 Answers 2