Elementor Open Specific Tab, Toggle or Accordion on Link Click

Table of Contents

Let's learn how to open specific tabs, accordions or toggles based on the link that was clicked! Test the demo on this page by adding ?heythere and ?bonjour at the end of the URL !

To begin with, add an HTML element and copy the code you need

Elementor Open Specific Tab, Toggle or Accordion on Link Click 1

Insert the HTML element anywhere in the page, preferably close to the tab, accordion or toggle element. Then, add the code you need. < >

For opening a specific tab, use this code

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){

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

let strings = ['?hello',
'?heythere',
'?bonjour'
];

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

For opening a specific accordion, use this code

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
let accordiontitles = $('.elementor-accordion-item .elementor-tab-title');

let strings = ['?hello',
'?heythere',
'?bonjour'
];

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

For opening a specific toggle, use this code

<script>


document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
let toggletitles = $('.elementor-toggle-item .elementor-tab-title');

let strings = ['?hello',
'?heythere',
'?bonjour'
];

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

For opening a tab, from the Essential Addons elements, use this code

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){

let desktoptitles = $('.eael-tabs-nav li');

let strings = ['?hello',
'?heythere',
'?bonjour'
];

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

Then, add a ?query to your link

On the links that you want to open a specific tab or accordion, add a ?bonjour at the end. This will tell the Javascript to open tab or accordion three. Add '?heythere' to open tab or accordion two. You can change these to any name you want; just make the according changes in the code.

In the code, the 'strings' array represent what string in the URL the Javascript should look for. Then, it will open the according tab, accordion or toggle, according to where that string is found.

For example, because ?bonjour is in third position, it will open the third tab, accordion or toggle.

Simply add a new '?newopener' to the 'strings' array, to open accordion four. And so on.

Watch the video to learn more, such as how to target only a specific element on your page!

Finally, enjoy your new Elementor specific tab, accordion and toggle opener!

Important: to avoid any negative SEO effects from having URLs with parameters ( ?queries ), set a canonical URL to your page.

That would simply be your normal URL for that page, without any ?queries. Use a SEO plugin such as Rankmath for this. Read more about this here.

Let me know if everything works for you!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments