Link to tab

Resolved Walton
(@walton)

3 weeks ago

I am trying to link directly to a tab. I find that using URFL/#tab-TABNAME loads the page with the tab open but as soon as you try to navigate, the tab closes.

I tried following the instructions here: https://yikesplugins.com/knowledge-base/link-directly-to-a-custom-tab/

It had no effect. I’d like to figure this out. I seem to remember at one point there was a shortcode that we used to use to link directly to tabs.

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author

jpowersdev

(@jpowersdev)

2 weeks, 5 days ago

Hi @walton,

Please try this and let me know if it works for you:

const tabOpener = function(tab) {
  // Simulate a click on that tab.
  if (typeof tab === 'string') {
    const currentTab = jQuery('.' + tab + '_tab');
    currentTab.children('a').click();
  }

  // Scroll to that tab.
  jQuery('html, body').animate({
    scrollTop: jQuery('#tab-' + tab).parent().offset().top,
  }, 300);
};

jQuery(document).ready(function($) {
  const {hash} = window.location;
  let tab;

  // If a # exists in the url lets see if its a tab.
  if (hash && hash.includes('#tab-')) {
    tab = hash.replace('#tab-', '');
    return tabOpener(tab);
  }

  // On click we'll check to see if the event target has a tab hash.
  $('body').on('click', function(e) {
    if (e.target.hash && !e.target.hash.includes('#tab-')) {
      tab = e.target.hash.replace('#tab-', '');
      return tabOpener(tab);
    }
  });
});

Jon

Plugin Contributor