Wordpress Divi Theme - Anchor link opens tab toggl

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 the tab and opens it --- however, if I am on a different page than the tabs are on, the anchor link only goes to that page, it does not open the tab.

URL: http://elkodowntown.wpengine.com/

The Anchor links are under the OUR MEMBERS menu in the navigation.

JS:

    jQuery(function($) {
        $('.menu-item-179 a').on('click', function(event){
            tabScroll('.et_pb_tab_0');
            return false;
        });
        $('.menu-item-180 a').on('click', function(event){
            tabScroll('.et_pb_tab_1');
            return false;
        });
        $('.menu-item-181 a').on('click', function(event){
            tabScroll('.et_pb_tab_2');
            return false;
        });
        $('.menu-item-182 a').on('click', function(event){
            tabScroll('.et_pb_tab_3');
            return false;
        });
        $('.menu-item-183 a').on('click', function(event){
            tabScroll('.et_pb_tab_4');
            return false;
        });

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

    $(function hash() {
        var hash = window.location.hash.replace('#', "");

        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'); }
    });
});

Anchor Links HTML:

<ul class="sub-menu">
    <li id="menu-item-179" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-179"><a href="/our-members#shop">Shop</a></li>
    <li id="menu-item-180" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-180"><a href="/our-members#service">Service</a></li>
    <li id="menu-item-181" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-181"><a href="/our-members#eat-drink">Eat &amp; Drink</a></li>
    <li id="menu-item-182" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-182"><a href="/our-members#arts-entertainment">Arts &amp; Entertainment</a></li>
    <li id="menu-item-183" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-183"><a href="/our-members#stay">Stay</a></li>
</ul>

Tabs HTML:

<div id="member-tabs" class="et_pb_module et_pb_tabs  et_pb_tabs_0 et_slide_transition_to_3 et_slide_transition_to_0">
                <ul class="et_pb_tabs_controls clearfix">
                    <li class="et_pb_tab_0 et_pb_tab_active"><a href="#">Shop</a></li><li class="et_pb_tab_1"><a href="#">Service</a></li><li class="et_pb_tab_2"><a href="#">Eat &amp; Drink</a></li><li class="et_pb_tab_3"><a href="#">Arts &amp; Entertainment</a></li><li class="et_pb_tab_4"><a href="#">Stay</a></li>
                </ul>

The anchor links (#shop,#service, etc) are being called by <a name="#shop"> here (directly under the Tabs HTML):

<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_0 et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">
    <a name="shop"></a><!--- tab content here --->
</div>

I'm sure there is a better way to organize my JS.

Any help is appreciated!

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! :)