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 isMobile = window.innerWidth < 768;
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: isMobile? mobiletitles.eq(openThis).offset().top - 100 : 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

After, 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!

Important: Would you like it on hover instead of click? Simple change this line of code

e.addEventListener('click',function(){

to this

e.addEventListener('mouseenter',function(){

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

Comments

29 Responses

  1. Hello, thanks for the post, it helps me. But i want to do the same on a different page. So my button is on a different page than my toggle. I tried you code but it only work for content on the same page. Do you have an idea of what can i do ? Thanks a lot !!

    1. Hey Caroline! At the very start of this tutorial, you will find this :

      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!

      Cheers!

    1. Hey Jeffrey!

      Simply adjust this code:

      if (!(toggletitles.eq(openThis).hasClass('elementor-active'))){
      toggletitles.eq(openThis).click();
      }

      So it becomes just

      toggletitles.eq(openThis).click();

      Let me know if that works fine for you!

  2. It would be awesome to use this method for opening the tabs from the menu in the header. The problem is I don't have the attribute field in the menu. There is only a field for a link and title attribute which seems to isn't the same as an attribute in the button mentioned here. Do you have any suggestions?

    1. Maxime Desrosiers So I need to add to the menu a link http://www.mywebsite.com/#titleoftab. Then add to CSS class under the link also the title of this tab. And to change the line in html block to this: let eaTabsTitles = $('.titleoftab'); Is this correct? If so something is wrong here. It doesn't work. I have 5 tabs somewhere at the bottom of the page and therefore 5 links in the Menu in the sticky header. All I want is to use the menu in the header to open tabs on the same page.

    2. Paul Guzenko Sorry Paul, indeed the information in my other comment wasn't right... Here is what you need. Give the class 'navitems' to your nav items, and the code below should work fine. Your first nav item will open the first tab, and so on.

      <script>

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

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

      let openers = document.querySelectorAll('.navitems');

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

    3. Maxime Desrosiers Thanks for the reply. It seems you wrote for Elemntor tabs and I am using EA tabs. I tried to replace your line "let desktoptitles" from your comment with the line from your EA piece and when I tested the menu I managed to move from the menu to a tab (not sure if it opened it though). I can't figure out how to set up the other nav items. Let say I have one tab with the title "tours", I put to the link field in the menu "#tours" and in CSS class "navitems". Then I have a tab with the title "museum". Should I put in to link field in the menu "#mesum" and to its CSS class also "navitems"?

    4. Maxime Desrosiers Right now it only scrolls down to the tabs and open only the first tab no matter what nav item I click. How to open the ohter tabs? I'm using this code in HTML block over the tabs:
      <script>

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

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

      let openers = document.querySelectorAll('.navitems');

      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>

    5. Paul Guzenko Your code isn`t right.. use this

      <script>

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

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

      let openers = document.querySelectorAll('.navitems');

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

    6. Maxime Desrosiers This is great. Finaly. Thak you very much! Now it works. The only problem is it doesn't work on mobile (I tried on iphone and on desktop chrome with toggled device tollbar).

    7. Maxime Desrosiers In Chroms console it says:
      (index):744 Uncaught TypeError: Cannot read property 'top' of undefined
      at HTMLLIElement. ((index):744)
      (anonymous) @ (index):744
      It seems it couldn't find the element. It works on desktop though...

      1. How to fix this for mobile? Have the same issue when using the tab code. I changed 100 to 50 and still does not work. This is the line that I changed:

        From Code

        $('html, body').animate({
        scrollTop: desktoptitles.eq(openThis).offset().top - 100
        },'slow');

        to Code

        $('html, body').animate({
        scrollTop: desktoptitles.eq(openThis).offset().top - 50
        },'slow');

        Thanks in advance

      2. I fixed this. The problem was only for the 'tabs' element of Elementor, now it should work fine.

  3. Hi
    i would like to make the first toggle to be active on page load

    i have changer the click to loadend but it doesnt work, i'have tried to simulate the click also with

    document.getElementById('toggle0').click(); where the toggle0 is the id of the button

    Can you give me a hint on what i should change to make the first tab active on loads end ?

    Thanks

    1. Hey Omar!

      You could simply use the 'Accordion' element for this, as the first accordion is opened by default.

      If you really want the toggle element, try this code:

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.elementor-tab-title').eq(0).click();
      }); });
      </script>

  4. Hello, each of my tabs contain embedded video (either via iframe or in a div).

    The problem is when I switch between tabs I have multiple videos playing in the background.

    How do I pause/stop the active tab upon switching another tab?

    p.s. I can't code in JS myself :/

    1. Indeed, this would require custom JS! Beyond the scope of the tutorial though, but you can message me if you are interested in custom work.

  5. Great resource! I've implemnted seamlessly for EA advanced tabs. Do you happen to know also, how we can jump to the top of the content div (eael-tabs-content) when toggling between the tabs?

    1. Hey Alana! Probably this could be solved with JavaScript, however this would rather be custom work... If you are interested in custom work, you can write me at maxime@element.how , or by Messenger (see footer).

    1. Hey Toine! Probably yes, with some code modifications. It could work for any / all the addons! However providing the code for all of them is beyond the scope of the tutorial here.

  6. Hi - first of all thanks for your great work, really appreciate it! I have one issue though. Problem is that in my accordion, the scroll-to goes to the bottom of a tab once I had another tab open before. Let's say accordion tab 3 is opened and I click on a button to open tab 4. Then it scrolls to the OLD position that the title of tab 4 had been (which is at the bottom of the opened tab 4 after closing tab 3) - although it is has moved more to the top, as tab 3 has been closed in between.

    If I have tab 3 open and then click on tab 2, it is working (as tab 2 does not change it's position after closing tab 3).

    Is it possible to add a function like this:

    - all tabs should be closd on start
    - on click on one of the buttons, all tabs are closed (so all tabs have their new position)
    - then after a second, the scroll to function figures out the position of the new tab title that has been clicked

    Would this work? Can you help here?

    Thanks & all the best
    Bart

Leave a Reply