Will it be possible to use tabs in url navigation with xpro v2.1.x going forward?

[dsthompson]

Hi. More testing my site before upgrading to xpro v2.2.6 which i have in a staging area. My production site is on xpro v1.2.7 and I have built the site heavily using classic tabs and use the following added global js so that I can add /#tab-# to the url to take users to the specific content of the page.

jQuery( function($){

$( window ).on('load resize', function(){
	scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
});

function scroll_to_tab ( tab_id ) { 
	console.log(tab_id);
	var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tab_id + '"]');
	if(tab_nav.length >=1) {
		$( tab_nav ).trigger('click');
		$('html,body').stop().animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
	}
}

});

The above code doesn’t seem to work on v2.1.6 and I know there is a big change to the v2.1.x tabs code and have looked at the kb’s on this topic.

Is there any current or planned solution to making tabbed navigation work in the v2.1.x and going forward? If not are there any third-party solutions? As you can imagine, this will change my UX/UI significantly if I can not find a solution.

Thank you.

[nico]

Hi @dsthompson,

Thanks for writing in.

I believe that it could be done. However, base on my understanding, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[dsthompson]

Thanks for the reply. I received the posted code way back in the days of using X and believe it is part of the support archives and I assume the changes in the v2.1.x have affected many Xtheme sites? It is working currently on XPro v1.2.7.

So, is there a developer resource familiar with your latest tab changes that you could recommend to modify the code? Also, since my site is heavily reliant on classic tabs, would I need to replace all of those tabs with the new tab code?

Really feel like I’m stuck in a bad place here.

Thanks

[Prasant]

Hello @dsthompson,

Thanks for updating the thread.

Actually the problem with custom codes is that it always has the probability of breaking the workflow if new update comes up. Unfortunately we don’t maintain a developer handbook related with updates. Our changelog is the area for getting information on the changes and updates.

https://theme.co/changelog/

Thanks.

[dsthompson]

OK, I’m stuck with v1.2.7 - forever? I found this article very helpful in understanding more about the challenges faced with this change and appears to be similar to my issues https://theme.co/apex/forum/t/after-updated-theme-by-links-from-the-tabs-are-not-working/26011/6

I used the tabs shortcodes to build my pages (not cornerstone). I need to know

1. Will my “classic tabs” continue to work going forward with xpro or do they need to be replaced with new tabs? - Using Corenerstone?

2. If it is best to redo all my tabs (ugghh) so be it. If I invest the time to do this, am I correct in thinking that the
   guidance and js discussed on https://theme.co/apex/forum/t/after-updated-theme-by-links-from-the-tabs-are-not-working/26011/6 would get me back to being able to use /#tab-1 or now /#x-legacy-tab-1 in links?

It appears that there are solutions here and that some are getting guidance other that “it not in our scope”.

Thank you for your consideration

[rad]

Hi there,

The tab and accordion implementation have been changed long ago, even before 1.2.7. We only provided a workaround for /#tab-1 to work (javascript), but it’s not meant as a permanent solution as the features changes.

1. It may not or may work depending on the customization or content in your tabs as the shortcode. And I personally recommend using cornerstone tabs instead of shortcode since it’s saved as data in the database. Which means, if there are future changes, it can easily migrate and adapt to new implementation instead of shortcode that will remain as is. I recommend doing this in staging and only move it on your live site.

2.With the cornerstone v2 tab element, it will be #tab-1 format, and for classic tab element, it will be #x-legacy-tab-1.

Thanks!

[dsthompson]

Thanks much Rad this is helpful and give me steps I can try to resolve this issue. Since my pages using tabs were build outside of Cornerstone - and are all three tab horizontal, then to make the change over, could I simply set-up the tabs in cornerstone and then copy the code (without tab content) and swap out old shortcodes with new cornerstone tab code and adjust content placement within the new three tab horizontal code?

I would plan on trying this swap out method on one page to make sure its working, then try the referenced js regarding tab navigation as step 2 to this process?

Am I missing any other considerations in this approach?

Thanks again!

[ruenel]

Hello There,

You cannot swap out shortcodes of the tabs created in Cornerstone with your old code because they have a diiferent structure. The best solution to this is to modify the JS code so that it would fit the updated tab element. As Rad pointed out in #2 step, changing #tab- to #x-legacy-tab-. Perhaps something like this:

jQuery( function($){

  $( window ).on('load resize', function(){
	scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
  });

  function scroll_to_tab ( tab_id ) { 
	console.log(tab_id);
	var tab_nav = $('#x-legacy-tab-' + tab_id + '"]');
	var tab_content = $('#x-legacy-panel-' + tab_id + '"]');
	if(tab_nav.length >=1) {
		$( tab_nav ).trigger('click');
		$('html,body').stop().animate({scrollTop: $(tab_content).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
	}
  }
});

For your link, you will still use the http://example.com/#tab-1 format.

Hope this helps.

[dsthompson]

Thanks much Xteam. This give me the path forward I was looking for. Will give it a try now and let you know how it works so that it might help others.

[rad]

You’re most welcome and glad we could help!

[dsthompson]

I tried the new js and tab nav using /#tab-1 still not working. I wanted to make sure I understand here as I got to thinking more about this as I started into trying to make this work.

Since my tabs were always made using shortcodes and not cornerstone, then the issue of “classic tab element and #x-legacy-tab-1” isn’t relevant - right? My tabs follow the posted shortcode of:

[tab_nav type=“two-up”][tab_nav_item title=“Click Me!” active=“true”][tab_nav_item title=“No, Click Me!” active=""][/tab_nav][tabs][tab active=“true”] Your Content [/tab][tab] Your Content [/tab][/tabs]

That also makes me think that the orgiainal js for tab nav should work?

jQuery( function($){

$( window ).on('load resize', function(){
	scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
});

function scroll_to_tab ( tab_id ) { 
	console.log(tab_id);
	var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tab_id + '"]');
	if(tab_nav.length >=1) {
		$( tab_nav ).trigger('click');
		$('html,body').stop().animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
	}
}

});

Confused here.

Thanks for your patience with me here.

[ruenel]

Hello There,

You use this shortcode:

[tab_nav type="two-up"][tab_nav_item title="Click Me!" active="true"][tab_nav_item title="No, Click Me!" active=""][/tab_nav][tabs][tab active="true"] Your Content [/tab][tab] Your Content [/tab][/tabs]

And you have to update the JS code and use this instead:

jQuery( function($){

  $( window ).on('load resize', function(){
	scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
  });

  function scroll_to_tab ( tab_id ) { 
	console.log(tab_id);
	var tab_nav = $('#x-legacy-tab-' + tab_id + '');
	var tab_content = $('#x-legacy-panel-' + tab_id + '');
	if(tab_nav.length >=1) {
		$( tab_nav ).trigger('click');
		$('html,body').stop().animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
	}
  }
});

I have tested this already and this works for me. Please let us know how it goes.

[dsthompson]

OK, thanks Rue, will do some more testing.

Works Great! Thanks again for all you help on this one.

[ruenel]

Great! Please let us know if this works out for you.