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 all,
I came across this while looking for a solution to link to Tabs. While none of the above worked for me, it did help push me in the right direction. Click() wasn't working.
My assumption - Recently Elementor released the new update which allows Tabs to include containers, flexbox, nested etc etc. I can only assume this update and changes may be the reason.

The following code works however needs a little tidying up, but hopefully helps someone.
Happy to receive feedback, if anyone can improve or sees issues.

The first part; reset variables, sets 'change' (false = no change, true = change), gets the hash, strips # from hash. Then converts url friendly tab_name to tab div ids (there are 3 divs to hide and 3 to show - 2 relate to the tab buttons and 4 for the content areas).
Note: you'll need to use div tools to inspect and get the ids relative to the tab widget you're working with. This example, 1962 (part of id) & 984da58 (data-id) are the ids for the second tab, 1963 is the 3rd tab.

`

		let hash = "";
		let change = false;
		let a = "";
		let b = "";

	  setTimeout(function(){
	  var hash = window.location.hash;
	  var hash = hash.replace('#','');
	  
	  if (hash == "web-account"){
		  var change = true;
		  var a = "1962";
		  var b = "984da58";
	  } else if (hash == "ws-account"){
		  var change = true;
		  var a = "1963";
		  var b = "8b03995";
              }

`

Second part; selects 4 of the divs by id and 2 by data-id, and then changes the class and attr.
Note: 1961 (part of id) and e973369 (data-id) are the ids for the FIRST tab, the normal one that's visible first and needs to change from/hide.

`

	  if(change) {	
			jQuery('#e-n-tabs-title-1961').removeClass('e-active');
			jQuery('#e-n-tabs-title-'+ a ).addClass('e-active');
			jQuery('#e-n-tabs-title-1961').attr({"aria-selected":"false", "aria-expanded":"false", "tabindex":"-1"});
			jQuery('#e-n-tabs-title-'+ a ).attr({"aria-selected":"true",  "aria-expanded":"true" , "tabindex":"0"});	

			jQuery('#e-n-tabs-title-1961-accordion').removeClass('e-active');
			jQuery('#e-n-tabs-title-'+a+'-accordion').addClass('e-active');
			jQuery('#e-n-tabs-title-1961-accordion').attr({"aria-selected":"false", "aria-expanded":"false", "tabindex":"-1"});
			jQuery('#e-n-tabs-title-'+a+'-accordion').attr({"aria-selected":"true",  "aria-expanded":"true" , "tabindex":"0"});		
			
			jQuery('[data-id="e973369"]').removeClass('e-active');
			jQuery('[data-id=' + b +' ]').addClass('e-active');
			jQuery('[data-id="e973369"]').attr("hidden", "hidden");
			jQuery('[data-id=' + b +' ]').removeAttr("hidden");

		}
	  }, 100);

`

Wrap the whole thing in a doc ready, tuck it in the footer; the above has a timeout like @Artem66 code.

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