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,
My apologies as I'm not very familiar with javascript. How do I change the tab from tab-title to just tab-?

Thank you!

Hi,
My apologies as I'm not very familiar with javascript. How do I change the tab from tab-title to just tab-?

Thank you!

@samsamvt nothing to apologize for! No JavaScript experience is needed, I might not have made it clear.

What I meant is that you use the inspect element in your browser to find the tab title, you'll find that it has an id that's similar to elementor-tab-title-1515. You'll need to copy the id then append it to the website URL.

so it will be like:
https://your-website.com/#elementor-tab-title-1515

(notice that you need to add # between your website URL and the id you copied earlier)

Then you need to remove the title- part so it will become:

https://your-website.com/#elementor-tab-1515

I hope it helps.

Hi, I've tried the above instructions, I use Header/Footer Injection Wordpress Plugin, I inserted the javascript code within

<script>...</script>

at footer.

I have url 1 : button link to > mywebsite.com/url2/#elementor-tab-2559

url 2 contain the elementor tabs widget.

But still, on my side, it doesn't switch to that section. What am I missed out ?

@mlyk1234

Sorry I'm not sure what's wrong in your case, maybe check the console in the browser devtools to see if there's any error showing?

Thank you Ammar it works for me! I would like to ask is there posibility to somehow rename from elementor-tab, to lets say on smth tab-1, tab-2 and so on?

Special Thanks to you. There is no vedio on YouTube regarding this. I read all the stuff many time my problem is similar to this but I don't know you are taking about the same one (which I am facing). I want to add the link of noorani qaida page to the noorani Qaida tab. Tabs are on the home page. I want to open Some tabs on the home page and some to link a specific page which should open into a new tab. And there is no option in elementor tab widget of adding any URL I wanna add the URL in the tabs no 2 which is noorani qaida. There is only one option of CSS ID.
But I try another plugin with custom link but it doesn't work. I hope you understand my point. Here is my website alquranglobal.com Tabs are in the 2nd Section.in home page. Thanks

Thank you Ammar it works for me! I would like to ask is there posibility to somehow rename from elementor-tab, to lets say on smth tab-1, tab-2 and so on?

Oh it's seems like that in this case we don't have the option to change the name of these tabs ?

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

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