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() {
setTimeout(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');
} } );
}); }, 1200); });
</script>

For opening a specific accordion, use this code

<script>

document.addEventListener('DOMContentLoaded', function() {
setTimeout(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');
} } );
}); }, 1200); });
</script>

For opening a specific toggle, use this code

<script>


document.addEventListener('DOMContentLoaded', function() {
setTimeout(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');
} } );
}); }, 1200); });
</script>

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

<script>

document.addEventListener('DOMContentLoaded', function() {
setTimeout(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');
} } );
}); }, 1200); });
</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!

Comments

81 Responses

  1. This is the code:
    <script>

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

    let strings = ['?Emotions',
    '?Nutrition',
    '?Environment',
    '?Veterinary Care'
    ];

    strings.forEach( (string,i) => {
    if (window.location.href.indexOf(string) > -1) {
    accordiontitles[i].click();
    } } )
    }); });
    </script>

  2. hi there!! thanks a lot for your code it works great on the desktop but on the mobile version doesnt work. if i needto change something let me know?thanks again

    1. Thank you a lot for the code Maxime. I have the same issue as you Giannis Gk , doesn't work on the mobile version. Do you remember how you resolved it?

  3. Hello There,

    i'm using the crocoblock jet-accordion and tab system.
    Could you please tell me, what I have to insert in the code?

    1. Hello Stefan! I would not know, as I don't use that plugin myself. You would need to adjust the class names to fit what that plugin has.

  4. Is there anyway to go to the top of the page, I am using the Essentials Addon advanced tabs, and a vertical tab. I've used the script, and it works. But when linking to individual tabs, it takes me to the middlle of the page, instead of the top. Any suggestions?

    1. Hey Frederik!

      Try changing this line of code

      scrollTop: desktoptitles.eq(i).offset().top - 100

      to this

      scrollTop: desktoptitles.eq(0).offset().top - 100

      Then, adjust the '100' value to your liking. It's a px value!

  5. What about if we use with elementor pro gallery. classes are (.e-gallery-masonry .elementor-gallery-title)

    1. Use this code!

      <script>

      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      let gallerytitles = $('a.elementor-gallery-title');

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

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

    1. Yes! With this code:

      <script>

      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      let gallerytitles = $('a.elementor-gallery-title');

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

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

    1. Hello Jessica!

      It works, no matter what your tabs title are. However, in the code, it needs to be a single string indeed. These, don't need to match with your actual tabs title.

      So for example, you have a tab title 'How to eat tofu', then in strings, you can just use 'tofu', and the URL will have ?tofu added at the end, to open the right tab.

    2. Maxime Desrosiers thank you so much 🙂 I have tried and tried and would never have found out by my self. Forever grateful

  6. How would I stop it from scrolling to the top when button is clicked? I just want it to toggle to the approiate section when the button is clicked.

    1. This tutorial is for when you are coming from another page! The code is different for same page... Maybe I will make another article for that.

    2. Maxime Desrosiers Hello, the code works perfectly. Though I have the same question with Rawad,
      do you have an update?
      I mean does it have a Ajax function, like if your on the current page and use a button to open specific tab without page refresh, should only open the specific tab directly?

    3. Kingztein Epralag I have this tutorial coming very soon about same page link to tab, toggle or accordion! Subscribe to my mailing list to be informed when it gets released!

    4. Maxime Desrosiers thanks for the response. I already subscribed to your mailing list. Thanks. Let us know for updates 🙂 God Bless

  7. Thanks for the code but the offset doesn't work with responsive websites. I.e -100px might work fine on a desktop width but for mobile width the scroll is incorrect.

    1. Yes indeed, depending on your design, the element you are using, the amount of content, and the viewport... some adjustments might be needed!

  8. I am not a pro coder, but I have done it . I was trying to open accordian #4 and with help of your code I have achieved, thanks for making video for noob like me. Much thanks

  9. Hi there

    Thank you for an awesome code, that worked for me earlier.
    But now I have changed the layout of my page, to use something else.
    I am using Premium Addons Modal Boxes for displaying pictures. - https://papangames.dk/reviews - Is there anyway I could use the same "direct link code" as before? So when the link is pressed, it goes to the page and the modal popup.

    Thank you very much in advance. ☺

    1. Hey Frederik! It should work with this code :

      <script>

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

      let desktoptitles = $('.premium-modal-trigger-img');

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

      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>

  10. using the code worked great, thank you! I am using it for an accordion and the only issue i am having is the first accordion does not open when using the code

    1. Andrew Sloan The first accordion is opened by default! In the code, something was needed, to 'skip' it essentially. Just link to it with a normal anchor link, and it will show up, and be opened. Don't use the ?hello link for the first accordion.

  11. Hi, i applied the accordion code, however when clicking on the link it only scrolls to the selected accordion, but it does not expand ... What can it be?

    1. INOXIAÇO Yes... new bug from an update... Here is the fix :

      Wrap part of your code in a timeout function

      After :

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

      add:

      setTimeout(function() {

      Then at the end, where you see this:

      });
      </script>

      Write this instead :

      }, 1200); });
      </script>

    1. Yes I thought of coding it this way, but in the end decided to keep it simple. Also, if I coded it that way, people would have asked for control over which URL goes where.... ie write their own url.

      Thanks for sharing your way though, it's pretty good as well! I prefer it myself, although both work just fine ofcourse.

      Could you atleast mention somewhere in your article that you got the idea and / or part of the code from here though? I would really appreciate it.

      Cheers

  12. Hi Maxime. I got it working on my website. Thank you. Is there any way to open a tab with a link from the same page, without refreshing? Just as if i was clicking directly on the tab but using a link or a button isntead? I will really appreciate the help.

      1. Hi Maxime, has there been an Update for the refreshing page scenario? Cant find the solution unfortunately.

        Thank you 🙂

  13. Hi,

    The code doesnt work for me

    I am using widget Advanced Accordion from Elementor Kit. What should i do? Thx mate!

  14. Thanks for the great tips! Is it possible to go to the EA tabs and open it via menu? Because I don't have any attributes in the menu settings. I can add only the link there. I want to open (and scroll there) the tabs by using the menu. Thanks in advance!

    1. Maxime Desrosiers Thanks. Do you know how to use in ?tabtogetto non-English words? I have titles for tabs in non-English language. Is it possible to use other than titles o the tabs ids (I am working in Elementor)? I've just tried and it works only with English. And also I've noticed that when you are on the same page as tabs and you click on the link it reloads the whole page again. Is it possible that ?queryoftheobject would work as smooth as hashtaged link?

    2. Paul Guzenko non-English, you mean non-latin characters, right? To be honest I don't know... I never worked with URLs that weren't in latin, so it's not clear to me why it doens't work...

      Re: page reloading, yes, that will happen...

  15. Hey thanks for this code.

    1. The tabs open as they should on mobile and desktop, but the scroll function only works for desktop. On mobile, it stays at the top of the page. Is there a way to fix this?

    2. Also is there was a way to set a specific scroll position based on the device being used? (On Desktop, I have the scroll set to the top of the whole element. On mobile, I would like the scroll to go to the top of the opened tab index)

    https://wordpress-472822-1929625.cloudwaysapps.com/...

    1. Hey Joseph! The code below should work. I added scroll for mobile.

      <script>

      document.addEventListener('DOMContentLoaded', function() {
      setTimeout(function() {

      jQuery(function($){

      let desktoptitles = $('.elementor-tab-desktop-title');
      let mobiletitles = $('.elementor-tab-mobile-title');
      let isDesktop = window.innerWidth > 767;

      let strings = ['?adrenal',
      '?thyroid',
      '?female', '?male', '?weight', '?brain', '?sleep', '?drive', '?energy', '?anxiety'
      ];

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

      </script>

      1. Mr 🙂 Finally works. Thank youu.
        Maybe question, is it possible to combine with ajax?
        When i click link, it redirect and open tab, but it does with page reload :/ Possible do it without that reload?

        Thanks a loot,
        Dominik

  16. Hi there! I am using template feature in wordpress to put EA tabs inside EA tab thus making a outer tab and a inner tab, the code is working for outer tab but not for the inner tab, what should be the code for opening first the outer tab and then the inner tab? Thanks again

    1. I would suggest you try to simplify your layout... I don't have the code for this avaialbel, I would need to code it, but it's not something that will be useful for most of my readers... So I will work on more productive stuff instead. You can message me if you want this coded as custom work!

    1. Hey Jon! Add this code, in an HTML element, in your popup.

      <script>
      setTimeout(function() {

      jQuery(function($){

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

      desktoptitles.eq(1).click();
      mobiletitles.eq(1).click();

      }); }, 200);
      </script>

  17. Hi, i need help with a little css code,

    i want to bold the title of the acordion selected (when i open one of the acordions)

    Thx for the help and this excelent post 🙂

  18. Any way to open titles with umlauts (ä,ö,ü)?
    The problem is, when masking them for example with ü or ü it will only work when you exactly tyoe that in to your browser bar, since elementor always replaces these entity with the umlautm and then it does not work. Umlauts in the string won´t work as well, so the problem is, elementor does not keep the url as i write it.

  19. Funny - the blog here did change the & u u m l ; and the & # 2 5 2 ; too in my above reply! Didn´t expect that. Hope it can be read now...

Leave a Reply