WordPress Divi Theme - Anchor Link Opens Specific Tab Toggle

Question

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

Solutions like the one found on https://jonathanbossenger.com/using-anchor-links-to-open-accordions-and-tabs-in-divi/ only work when the anchor link is on the same page as the tabs.

I found a different thread on Stack that addressed this issue, but it had the finalized solution ironed out in a chat I don't have access to ( Wordpress Divi Theme - Anchor link opens tab toggle ).

I can see on their website that they were able to get it to work ( https://www.elkodowntown.org/our-members/#member-tabs|3 ).

How can I access the site code of Elko Downtown to find the final version of the JavaScript below that got it to work?

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

Answer 1

Every line of javascript transmitted over the web is visible by inspecting the browser. If all you're looking to do is see what they're finalized code is look below.

However, if you're using WP and trying to do things using JS/JQuery I strongly urge you to learn how to do the functions outside of WP first and understand what's going on, the code you take from will not always match your page structure/elements and you'll always wonder why things don't work.

Here's the code that's doing it for them:

    function _setTab(){
        // get current hash value
        var curHash = window.location.hash.substr(1);
        // only continue if hash provided and scoped to member tabs
        if( !curHash || !curHash.match('member-tabs') ){ return false; }

        // split and int val tab num
        curHash = parseInt(curHash.split('|')[1]);

        // ignore if tab is current state
        if( curHash === window._tabSelected ){ return false; }
        // set current tab to window
        window._tabSelected = curHash;

        // add click event to tab selected
        switch(curHash){
            case 0:
            case 1:
            case 2:
            case 3:
            case 4:
                jQuery('#member-tabs .et_pb_tab_'+curHash+' a').click();
            break;

            default:
                return false;
            break;
        }

        // scroll to tabs container
        _scrollToTabs();
    }

    // scroll to member tabs container with 50px offset
    function _scrollToTabs(){
        var oTabs = jQuery('#member-tabs');
        if( oTabs.length > 0 ){
            jQuery('html,body').animate({
                scrollTop: (oTabs.offset().top - 50)
            }, 1000);
        }
        return false;
    }

    // set falsey state for tab selected on load
    window._tabSelected = false;

    // we need to attach to window load because the tabs functions are initialized later in document
    jQuery(window).on('load', function(){
        // check for initial hash state
        _setTab();

        // add hash change window listener
        jQuery(window).on('hashchange', function(){
            _setTab()
        });

        // void submenu when we are in member section 
        var curPath = window.location.pathname;
        if( curPath.match('our-members') ){
            // only change hash and do not reload page
            jQuery('#menu-item-98 ul li a').on('click', function(e){
                e.stopImmediatePropagation();
                window.location.hash = jQuery(this).prop('hash');
                return false;
            });
        }
    });