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, 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, 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

Ben Crook

15.7k4 gold badges52 silver badges105 bronze badges

Hey, @BenCrook thanks for your response! I missed it. This time code goes further without any errors, unfortunately still nothing happen with tabs. I use debugger to check how browser interpreted this code: tabs.tabs('activate' 114); - just go ahead, as if nothing was inside there.
– Rob
Commented Sep 28, 2017 at 14:22
Try adding a comma after 'activate'. If that still doesn't work to test the methods are working try $('.selector').tabs('destroy'). That should fully destroy the tabs.
– Ben Crook
Commented Sep 28, 2017 at 14:26
1

I have changed initialization method and finally, your approach starts working :) thanks!
– Rob
Commented Oct 3, 2017 at 8:20
1

thank you. working here.
– Tora
Commented Aug 6, 2019 at 9:03

Add a comment |

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

0

$('.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);
})

answered May 17, 2020 at 12:12

Khodu Vaishnav

861 silver badge8 bronze badges

Add a comment |

2 Answers 2