Wordpress Divi Theme - Anchor link opens tab toggle

Question

I am trying to get anchor links to open up tabs on a specific page.

When I am on the page that the tabs are on, and I click on the anchor link, it correctly scrolls to t

Answer 1

After looking through the code for a while, the problem finally dawned on me. You currently wrap each of the click handlers inside their own jQuery function:

jQuery(function($) {
    $('.menu-item-183 a').on('click', function(event){
        tabScroll();
        return false;
    });
    function tabScroll(){
        $('#member-tabs .et_pb_tab_4 a').click();
        $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
    }
});
jQuery(function($) { ...

In each of these contexts, tabscroll() only has scope relative to the outer jQuery function. That is to say, in the above context, only menu-item-183 will have access to that particular tabscroll() function.

You later try to reference the tabscroll() function outside of that scope:

$(function hash() {
  var hash = window.location.hash.replace('#', "");
  if (hash == '#shop') { tabscroll(); }
  if (hash == '#service') { tabscroll(); }
  if (hash == '#eat-drink') { tabscroll(); }
  if (hash == '#arts-entertainment') { tabscroll(); }
  if (hash == '#stay') { tabscroll(); }
});

As this block reads, all conditionals are trying to do the exact same thing (call tabscroll() with no given parameter), and the condition could essentially be written as:

if (hash == '#shop' || hash == '#service' || ... ) {
  tabscroll();
}

But you need the tabscroll function to redirect to different locations that aren't the same as hash, which means you have to manually separate them out:

if (hash == '#shop') { tabscroll('.et_pb_tab_1'); }
if (hash == '#service') { tabscroll('.et_pb_tab_0'); }
if (hash == '#eat-drink') { tabscroll('.et_pb_tab_2'); }
if (hash == '#arts-entertainment') { tabscroll('.et_pb_tab_3'); }
if (hash == '#stay') { tabscroll('.et_pb_tab_4'); }

Then simply change your tabscroll function to allow for this:

function tabscroll(target) {
  $('#member-tabs' + target + ' a').click();
  $("html, body").animate({ scrollTop: $('#member-tabs').offset().top }, 1000);
}

The final step is to make sure that this new tabscroll() function is accessible from your condition. With your current code structure, it should be placed just above or below $(function hash() {});

Ultimately you should restructure your code so that every click links to this new tabscroll() function, but this should be enough to solve the problem for now :)

Hope this helps! :)