After updated theme by links from the tabs are not working

Hello,

I just updated my pro theme. Before doing so, the "my efforts"icons on the landing page would link to the corresponding tab on the “Our Efforts page”. When you click on an icon in the “my efforts” section, it will still go to that page put the tab info is not showing.
Here is the url: https://statenislandda.org/
Thanks so much in advance : )

Hi There,

Thanks for writing in! I have checked your site and I could not find any errors on your console log. After an update, most issues caused by server cache. Please make sure to purge your server cache and also make sure to disable CSS and Javascript minifications and then then test your site again.

Hope that helps.

hello,
unfortunately, that did not resolve the issue. Thank you

Hi there,

The Tab code is a little bit different and now has the legacy label for the classic tabs. Please check your customization and make sure that you change the selectors of the Javascript code to accommodate the new changes.

If you still have problems please get back to us with the customization that you have done, and we will check the case to see how we can help.

Also, having the URL/User/Pass of your website will help us investigate the customization after you tell us where you added and how you did customize stuff. Use the Secure Note to give us the login information.

Thank you.

Hello,
Thanks for your response. I actually used your shortcode for the tabs so now I am a bit confused on how to fix this. I would appreciate the help. Thanks so much in advance.

Hello There,

Thanks for providing the information. I have checked your site and to resolve this issue, please do the following:

  • Please edit your home and change the links of the icons. Instead of having https://statenislandda.org/our-efforts/#tab-1, please replace it with this new link: https://statenislandda.org/our-efforts/#x-legacy-tab-1
  • And then you’ll have to update the JS code as well into this:
jQuery( function($){ 
  $( window ).on('load resize', function(){
    scroll_to_tab ( location.href.split("#x-legacy-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-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');
    }
  }
});


jQuery(".x-accordion-toggle").click(function(){
  if(jQuery(this).hasClass('collapsed')){
    jQuery(this).text('Read Less');
  } else{
		jQuery(this).text('Read More');
	}
});

Hope this helps. Please let us know how it goes.

that worked!!! thanks so much!!

You’re most welcome!
We’re glad we were able to help you out.

I just noticed that If I just click on the Our efforts link in the navbar, it doesnt have the first tab activated as it did before the update. Can you please tell me what I have to change for this be as it was. Thanks so much in advance

Hi there,

Its link has no ID anymore, you should re-add it again, like https://statenislandda.org/our-efforts/#x-legacy-tab-1

Thanks!

where do i add that? When I put it in as the permalink on the page it automatically removes the #

Hi,

You need to change in it Appearance > Menus

I went ahead and change the link.

great thanks so much : )

You’re welcome, glad we could help.

Cheers!

Hello,
That did work, however, If you are on the “media” page and click the “our efforts” link in the navbar it scrolls down instead of redirecting to that page. I’m guessing its because there are two tabs on that page. Here is the link to the media page: https://statenislandda.org/news-press-releases/
please click on the “our efforts” link in the navbar when you are on this page to see the issue. Thank you :smile:

Hi There,

That is because x-legacy-panel-1 is an generic ID of tab items, you need to link your one-page navigation to a Section or Row with a unique ID instead.


Cheers!

Hello, Thanks for your response. im a little confused, which one-page navigation? The “our efforts” page or the “media” page? Thank you

Hello there,

It’s the Media page. Your ID #x-legacy-tab-1 has already been used twice on that page. One linking to the section below and the other to Our Efforts page. The browser was confused upon clicking the links.

I suggest you rename your ID uniquely in each of the menu/sections you’ve added this in. See example below:

  1. Our Efforts page
  1. Media page

It would be better if you apply this to your other pages as well so to avoid conflict on your nav/skip links.

Hope this helps.

I used a classic tab element for both and rather not have to redo everything. I have a class on there that I used. Can that be implemented somehow? Thanks

Hi there,

No, you cannot link to a section using class, only ID.

Please add unique IDs to the sections are well.