Elementor Tab, Toggle or Accordion Remote Control

Table of Contents

In this article we will learn how to open a specific toggle, tab and accordion by a button or link click on the same page.

To learn how to achieve the same from another page, check this tutorial : How to open a specific tab, toggle or accordion from a link on another page!

You will probably want to watch the video tutorial! Or you can try with just the instructions below.

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

Elementor Tab, Toggle or Accordion Remote Control 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 Elementor toggle

Works with the attribute : 'data-toggle-open|x'

<script>

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

let openers = document.querySelectorAll('[data-toggle-open]');

openers.forEach( (e,i) => {
e.addEventListener('click',function(){
let openThis = e.getAttribute('data-toggle-open');
if (!(toggletitles.eq(openThis).hasClass('elementor-active'))){
toggletitles.eq(openThis).click();
}
$('html, body').animate({
scrollTop: toggletitles.eq(openThis).offset().top - 100
},'slow');
});
}); } );
}); 
</script>

For opening a specific accordion, use this code

Works with the attribute : 'data-accordion-open|x'

<script>

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

let openers = document.querySelectorAll('[data-accordion-open]');

openers.forEach( (e,i) => {
e.addEventListener('click',function(){
let openThis = e.getAttribute('data-accordion-open');
if (!(accordionTitles.eq(openThis).hasClass('elementor-active'))){
accordionTitles.eq(openThis).click();
}
$('html, body').animate({
scrollTop: accordionTitles.eq(openThis).offset().top - 100
},'slow');
});
}); } );
}); 
</script>

For opening a specific tabs, use this code

Works with the attribute : 'data-tab-open|x'

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
    
let desktoptitles = $('.elementor-tab-desktop-title');
let mobiletitles = $('.elementor-tab-mobile-title');

let openers = document.querySelectorAll('[data-tab-open]');

openers.forEach( (e,i) => {
e.addEventListener('click',function(){
let openThis = e.getAttribute('data-tab-open');
if (!(desktoptitles.eq(openThis).hasClass('elementor-active'))){
desktoptitles.eq(openThis).click();
}
if (!(mobiletitles.eq(openThis).hasClass('elementor-active'))){
mobiletitles.eq(openThis).click();
}
$('html, body').animate({
scrollTop: desktoptitles.eq(openThis).offset().top - 100
},'slow');
});
}); } );
}); 
</script>

For opening a specific EA tabs, use this code

Works with the attribute : 'data-tab-open|x'

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
    
let eaTabsTitles = $('.eael-tabs-nav li');

let openers = document.querySelectorAll('[data-tab-open]');

openers.forEach( (e,i) => {
e.addEventListener('click',function(){
let openThis = e.getAttribute('data-tab-open');
if (!(eaTabsTitles.eq(openThis).hasClass('active'))){
eaTabsTitles.eq(openThis).click();
}
$('html, body').animate({
scrollTop: eaTabsTitles.eq(openThis).offset().top - 100
},'slow');
});
}); } );
}); 
</script>

For opening a specific EA accordion, use this code

Works with the attribute : 'data-accordion-open|x'

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
    
let eaAccordionTitles = $('.eael-accordion-header');

let openers = document.querySelectorAll('[data-accordion-open]');

openers.forEach( (e,i) => {
    e.addEventListener('click',function(){
let openThis = e.getAttribute('data-accordion-open');
if (!(eaAccordionTitles.eq(openThis).hasClass('active'))){
eaAccordionTitles.eq(openThis).click();
}
$('html, body').animate({
scrollTop: eaAccordionTitles.eq(openThis).offset().top - 100
},'slow');
});
}); } );
}); 
</script>

Now, enter a link for the button from which you will remotely open a tab, toggle or accordion

You can link to '#toggle1'. This is for reference only, and to add the keyboard navigability to the button, as well as the pointer cursor. DO NOT set an anchor link with that #toggle1 value anywhere on your page!

Elementor Tab, Toggle or Accordion Remote Control 2

Next set the attributes property of the button

Elementor Tab, Toggle or Accordion Remote Control 3

Go to the advanced tab and then expand the attributes dropdown. Write the text 'data-toggle-open|0'  in the Custom Attributes checkbox. If it's to open a tab, the attribute needed is 'data-tab-open|0' . For an accordion, it is 'data-accordion-open|0'.

JS is index based zero. Change the integer to 0,1,2 to open the toggles first, second and third respectively.

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

Let me know if it all worked out for you! Check the video for more instructions and for a demo!

Comments