[Resolved] Tab cell in another tab cell

[Author]

Posts

[Pat]

Hello,
I'm using Layout and would lke to insert a tab cell into another tab cell.
This seems feasible and I can populate all my cells, but in the frontend, the display is not really good.
In fact, only tabs are displayed in a first time (without any content), and if I click on one tab, then the content appears. If I reload the page, then the same issue occurs.

Is it possible to insert tabs in tabs and if yes, how can I get it working fine?

Another point : is there a possibility when we uses Layout tabs cell, to define the active tab ?

Regards
Pat

[Konstantinos Galanakis]

Hello Pat.

Thank you for contacting the Toolset Support.

I managed to reproduce your issue locally. It appears that there is some kind of bug with the jQuery tabs. You can use the provided workaround though to resolve your issue.

In your Toolset > Layouts CSS and JS, add the following JS code.

jQuery(document).ready(function($){
  
	$("ul.nav-tabs a").click(function (e) {
		href = $(this).attr('href');
		$('div'+href+' div.tab-pane:first').addClass('active');
	});

});

Please be kind enough to let me know if this code solves your issue, Also, if you have any further issues or questions, please let me know.

Regards

[Pat]

Hello Konstantinos,

Thanks for your help.
Unfortunately, this is not changing anything.
For info, here is the page where these tabs have been inserted :
hidden link
Could you have a look and tell me if you can see something strange?
Regards
Pat

[Konstantinos Galanakis]

Hello Pat

When your site loads, it creates a jQuery error. This error regards the code I asked you to insert to your Layouts CSS and JS. This happens because the jQuery script is loaded after the custom script you added.

I would eventually also need to request temporary access (WP-Admin and FTP) to your site
- preferably to a test site where the problem has been replicated if possible -
in order to be of better help and check if some configurations might need to be changed

Your next answer will be private which means only you and I have access to it.

Please backup your database and website

If you have any further issues, please let me know.

Regards

[Pat]

Hello Konstantinos,
I have moved the script in the footer section. No more jquery error now but still an issue in the display.
You could have a look at the same URL than before;
Regards
Pat

[Konstantinos Galanakis]

Hello Pat.

I've reviewed your setup again and tried to reproduce that on a local WordPress instance.

By modifying the initial JS code I gave you, I managed to achieve the desired user experience. So instead of the above JS code, please use the one below

/*Layouts js goes here*/
jQuery(document).ready(function($){
	$($("ul.nav-pills a").get().reverse()).each(function(index, value) { 
		var href = $(this).attr('href');
		if(index != 1)
		{
			$('div'+href).removeClass('active');
			$('div'+href+' div.tab-pane:first').addClass('active');
			$('div'+href+' div.tab-pane:first').removeClass('fade');
		}
		else
		{
			$('div'+href).addClass('active');
			$('div'+href+' div.tab-pane:first').addClass('active');
			$('div'+href+' div.tab-pane:first').removeClass('fade');
		}
	});
});

Let me know if this code resolves your issue. Also, if you have any further issues or questions don't hesitate to ask.

Regards

[Pat]

Hello Konstantinos,
Thanks for your support.
In fact, I'm not sure we are speaking of the same issue.
You propose to add the active class to the first tab and now that's OK.
The remaining issue is that when you load the page for the first time, all navs are displayed (even those that should be hidden) and the content of the active tab does not display.

I have changed with your new code and you can have a look on the result.

Just load the page and you will see the screencopy I have added. Normally, the 2 tabs in the bottom should not appear on page load (they are part of a non active tab)
Now, click on on a tab (which is not an active one) and you will see the content. Now, click again on one active tab and the content will display now !

Let me know
Regards
Pat

[Konstantinos Galanakis]

Hello Pat

I would eventually also need to request temporary access (WP-Admin and FTP) to your site
- preferably to a test site where the problem has been replicated if possible -
in order to be of better help and check if some configurations might need to be changed

Your next answer will be private which means only you and I have access to it.

Please backup your database and website

If you have any further issues, please let me know.

Regards

[Konstantinos Galanakis]

Hello Pat.

The plugin you use allows you to add code to the footer of your site, but if you want that code to be a JS script, you need to enclose it inside a script HTML tag.

The proposed code was not working because it wasn't enclosed inside a script tag. Under those circumstances, it was behaving as text and it wasn't working as JS code.

Now that it is enclosed, it seems to perform as expected.

Please let me know if this resolves your issue. Also if you have any other issues or questions, please don't hesitate to ask.

Regards

[Pat]

Ooopppsss!
I should have seen that bymyself !!!
Sorry for that.
Many thanks
Pat