WordPress: link to specific elementor tab on a specific page

README.md

It's a quick ad-hoc solution to allow you to link to your page to a specific tab from elementor tabs widget.

Here's the catch, you need to replace the id of the specific tab you want to use to not contain the title- part.

Use https://your-website/#elementor-tab-1515

instead of: https://your-website/#elementor-tab-title-1515

Make sure you add the JavaScript code in the footer, so it loads after the elementor tabs widget, otherwise the elementor tabs widget code will override what we're trying to acheive.

place-it-in-the-footer.js

jQuery(document).ready(function($) {
  var hash = window.location.hash;
  if (! hash) {
    return;
  }
  
  if (! hash.includes('elementor-tab')) {
    return;
  }
  
  var tabId = hash.slice(-6).substr(hash.slice(-6).indexOf('-') + 1);
  
  
  var tabElement = $('#elementor-tab-title-' +  tabId);
  if (! tabElement) {
    return;
  }
  
  $(tabElement).click();
});

Hi there, this is my code, for me, it works well https://github.com/Artem66/elementor-tab-anchor/blob/master/main.js

example link will be something like this - ?dummy=elementor-tab-title-1341#elementor-tab-title-1341 be careful with variable suf if your tab id is less than four digits

While it works, for me the result is that it doesn't render tabs that are above the one I'm targeting. Refreshing the page renders everything correctly but I lose the tab focus I'm trying to target. Any thoughts?

@zodieman You can try to remove setTimeout and run the script after the DOM is fully loaded.

jQuery(document).ready(function($) {
    var suf = '';

    var setupTabs = function() {
        var current = window.location.href;
        suf = current.slice(-4, -1);
        var current = current.split(`#elementor-tab-title-${suf}`);
        if (current.length > 1) {
            $('.elementor-tab-title').removeClass('elementor-active');
            $('.elementor-tab-title[data-tab="'+current[1]+'"]').addClass('elementor-active');
            $('.elementor-tab-content').hide();
            $('.elementor-tab-content[data-tab="'+current[1]+'"]').show();
        }
    };

    $(window).on('load', function() {
        setupTabs();
    });

    $('.elementor-tab-title[data-tab]').click(function(){
        var current_location = window.location.href;
        current_location = current_location.split(`#${suf}`);
        window.location = current_location[0]+'#elementor-tab-title'+$(this).attr('data-tab');
    });
});