[Oxley-2014Participant]

Rad,
Hello,

I am sorry but your code does NOT work at all.
It displays the contents of the 2 horizontal tabs, one after the other and the same goes for the vertical tabs.
So it looks like a page with all the info displayed. In that case there is no need of tabs!

What Christopher proposed almost does the entire job. But you know better than me which way to go: improving the Christopher’s code or yours.

Waiting for THE solution.
Thanks in advance.

Regards,
Oxley

[Oxley-2014Participant]

Rad,
Here is what I get without using the tabs actually.
Regards,
Oxley

https://www.dropbox.com/s/tycry5fi34fhr6n/3%20-%20Result%20with%20Rad%27s%20solution.jpg?dl=0

[RadModerator]

Hi there,

In tab structure, it implements the toggle feature. Only one tab nav and content will receive the active status.

The provided javascript solution will programmatically set active status, but it doesn’t utilize the click event. It’s the click event that decides which tab nav/content will get the active status. And it’s based on user interaction.

As further explanation, the active statuses are moving in and out depending on what tab you’re clicking. In that case, you’re clicking Description and Information complémentaire, hence, active statuses is just moving between them for the reason that tab is now limited to one instance.

Here is an additional temporary solution, please add this code as well.

jQuery ( function($) {

$('.woocommerce-tabs > ul > li > a').on('click', function() {

var inner_tab_content = $('div[data-cs-tab-index="' + $( this ).data( 'cs-tab-toggle' ) + '"] .x-nav-tabs .x-nav-tabs-item.active a').data('cs-tab-toggle');

setTimeout ( function() { 

$('div[data-cs-tab-index="' + inner_tab_content + '"]').addClass('fade in active');

}, 300 );

} );

} );

This will delegate additional active statuses, but this is very limited and only works for a specific setup like yours.

Thanks!

[Oxley-2014Participant]

Rad,
Hello,
Thank your for your help. The code you provided now “reproduces” the former and missing behavior.

I guess there is a misunderstanding (I may not get why you mean) because I do not see my setup as something specific since I just used the provided (by theme.co tutorials) shortcodes for nav-tabs.

The first horizontal tab from the left shows its content (without clicking on it).
The first vertical tab from the top shows its content (without clicking on it).
If I click on any other tab and come back to the first one (vertical and/or horizontal) I assume it is normal to see the content of the first one.

If by specific you mean the behavior of my setup after the update then what can I do?

I assume once this problem is fixed (the bug created by the update) I will not need to use any additional code.
Right now I have to use the code you provided and again I thank you for your help!

Regards,
Oxley

[RadModerator]

Hi there,

You may remove the added code if there is any available update that fixes the bug. You may also add javascript comment to label it 🙂

And yes, the issue that it had is due to toggling active statuses. What you click is the one that gets active status, when you click back to Description, it doesn’t you also click the tab in the content. Hence, the tab in the content has no active status, which is blank.

Glad it works now. Thanks!

[Author]

Posts