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

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