Classic Tab Links partially working

[geowmyers]

Hi!

We use the Classic Tabs element as a fundamental part of our site structure and have followed the topic called “After updated theme by links from the tabs are not working” to see how you advised them to correct the problem that happened after the latest major updates. After updating both our links and our JS section we can now get the links to take us to the right section on the page, but the tab in that section is still not opening for us.

Here is an example: http://rossdd.org/students/#x-legacy-tab-4.

If you give me an email I can set up an account that will allow you look at how this page is organized.

Thanks,
George

[basanta]

Hi There,

Thanks for writing in!

All the tabs in the page are working fine!

Can you please confirm us what exact issue you are facing, maybe a screencast video would help!

Thanks

[geowmyers]

The problem is that the links directly to the tabs from other places aren’t working.

Students | The Pioneer Center.webm (video)

[Alaa]

Hi geowmyers,
Thanks for sharing this video screencast, I’ve tried to reproduce this issue following the same steps in the video but unfortunately, I couldn’t. Please check my trial in this video:

Did you try using different browsers? clearing browser cache might help also.

Thanks.

[geowmyers]

Thank - you have actually reproduced my symptoms precisely! My problem is that links used to take me not just to the section with the correct tab in it, but directly to the tab itself. This prevented my users from having to click twice and also made links from outside the page much more usable - people who hadn’t looked at one of our pages with tabs before wouldn’t have to figure out the tab concept before they could see the content they had been linked to.

[rad]

Hi there,

It links and opens the tab correctly, and I’m not sure if I understand the issue. Would you mind providing a visual guide to clarify the issue? I didn’t have to click twice, further clarification will be helpful.

Thanks!

[geowmyers]

The second two screencasts are visual examples of the problem! Perhaps narrating the first part of the last screencast posted by Alaa will help. The beginning of the cast shows three tabs (Services, Info for School Districts and BREATHE!) in a section called “School Age 6 - 21” being clicked to demonstrate that they all work and display the correct content. This is all normal. What isn’t normal is that when the user scrolls up to the link for BREATHE in the Classic Feature list near the top of the page and clicks the link for the BREATHE tab, they are only taken to the School Age 6-21 section where the first tab’s content (Services) is displayed. In order to get to the BREATHE tab’s contents, they have to click it (the 2nd click).

[Alaa]

Hi geowmyers,

That’s clear thanks!

The JS code snippet you are using now is working fine, but it works when you directly hit a link to the targeted tab in your browser. I mean if you opened a new tab in your browser and pasted this link and hit enter:
http://rossdd.org/students/#x-legacy-tab-5
It will go directly and open your tab. “The Breathe tab in this case”.

So, what doesn’t work is linking to tabs internally on the same page. To achieve please follow these steps:
1- You will need to edit each “Feature List Item” and clear all the link data you added there and use the “Content” field instead, with something like that:

<a class="link_tab1" data-tab-id="1" href="#x-legacy-tab-1">Read more</a>

here:

2- As you can see there are three things you need to change in this link:
href > that should be the link to your tab.
data-tab-id > make sure to change the ID according to the tab link, if the link is #x-legacy-tab-1 then the ID is “1”.
class > each “Feature List Item” must have its own custom class that will be used in the JS code.

3- On the same “Feature List Item” options page, scroll down to assign the same custom class you set in the previous step:

4- Do that for the “Feature List Item” you have and any other link you would like to have on the page that will link to a tab.

5- Finally, update the JS snippet with this one:

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

  $('.link_tab1 a').on('click', function() {
    scroll_to_tab($(this).data('tab-id'));
  });

  function scroll_to_tab ( tab_id ) { 
    var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[data-x-toggleable="' + 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');
    }
  }
});

as you can see this is the part added:

 $('.link_tab1 a').on('click', function() {
    scroll_to_tab($(this).data('tab-id'));
  });

You must repeat this part for every link you want to add on your page, make sure to change link_tab1 to suit your new link.

I hope this helps.
Thanks.

[geowmyers]

Will do this - just to clarify, should I be adding multiple sets of code if I have multiple tabs, like this?

$(’.link_tab1 a’).on(‘click’, function() {
scroll_to_tab($(this).data(‘tab-id’));
});

$(’.link_tab2 a’).on(‘click’, function() {
scroll_to_tab($(this).data(‘tab-id’));
});

$(’.link_tab3 a’).on(‘click’, function() {
scroll_to_tab($(this).data(‘tab-id’));
});

[Alaa]

Yes, exactly.