Open a Specific Elementor Tab on a Link Click

Have you ever wanted to redirect a user to a page and display them a specific tab content without losing their attention with other elements or other tab items? Here in this blog post, I’d like to share how you can open a specific tab on a link click using JavaScript. Let’s jump into the exciting part:

Use Elementor Tab

Let’s say you have created an Elementor tab as following:

JavaScript

Now let’s apply the magic. Copy the following JavaScript code and put it in ScriptOrganizer or wherever you store your codes: 
				
					
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {

jQuery(function($){

let desktoptitles = $('.elementor-tab-desktop-title');
let mobiletitles = $('.elementor-tab-mobile-title');

let strings = ['?blog',
'?podcast',
'?ebook',
'?case-studies',
'?whitepaper'
];

strings.forEach( (string,i) => {
if (window.location.href.indexOf(string) > -1) {
desktoptitles.eq(i).click();
mobiletitles.eq(i).click();
$('html, body').animate({
scrollTop: desktoptitles.eq(i).offset().top - 100
},'slow');
} } );
}); }, 1200); });

End Result

Now you have the following active URLs where each of them open the specific tab item:

  • domain.com?blog
  • domain.com?podcast
  • domain.com?ebook
  • domain.com?case-studies
  • domain.com?whitepaper


Feel free to let me know if there are any problems or better solutions. Enjoy!

Example 1:

Example 2:

See here