Anchor Link to Open Accordion Elementor

Table of Contents

Let’s larn how to open up specific tabs, accordions or toggles based on the link that was clicked! Examination the demo on this page past adding ?heythere and ?bonjour at the cease of the URL !

To brainstorm with, add an HTML element and copy the code y’all demand

Insert the HTML chemical element anywhere in the folio, preferably close to the tab, accordion or toggle element. And then, add the code you need. < >

For opening a specific tab, use this code

<script>  certificate.addEventListener('DOMContentLoaded', office() { setTimeout(function() {  jQuery(office($){  let desktoptitles = $('.elementor-tab-desktop-title'); let mobiletitles = $('.elementor-tab-mobile-championship');  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, torso').animate({ scrollTop: desktoptitles.eq(i).start().acme - 100 },'slow'); } } ); }); }, 1200); }); </script>

For opening a specific accordion, use this code

<script>  certificate.addEventListener('DOMContentLoaded', office() { 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) > -ane) { accordiontitles.eq(i).click(); $('html, body').animate({ scrollTop: accordiontitles.eq(i).offset().top - 100 },'slow'); } } ); }); }, 1200); }); </script>

For opening a specific toggle, apply this lawmaking

<script>   document.addEventListener('DOMContentLoaded', function() { setTimeout(office() {  jQuery(office($){ let toggletitles = $('.elementor-toggle-particular .elementor-tab-title');  let strings = ['?hello', '?heythere', '?bonjour' ];  strings.forEach( (cord,i) => { if (window.location.href.indexOf(cord) > -1) { toggletitles.eq(i).click(); $('html, body').animate({ scrollTop: toggletitles.eq(i).offset().top - 100 },'ho-hum'); } } ); }); }, 1200); }); </script>

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

<script>  document.addEventListener('DOMContentLoaded', function() { setTimeout(function() {  jQuery(role($){  permit desktoptitles = $('.eael-tabs-nav li');  let strings = ['?hello', '?heythere', '?bonjour' ];  strings.forEach( (string,i) => { if (window.location.href.indexOf(string) > -ane) { desktoptitles.eq(i).click(); $('html, body').animate({ scrollTop: desktoptitles.eq(i).get-go().tiptop - 100 },'slow'); } } ); }); }, 1200); }); </script>

So, add a ?query to your link

On the links that you desire to open a specific tab or squeeze box, add a ?bonjour at the finish. This volition tell the Javascript to open tab or accordion three. Add ‘?heythere’ to open tab or accordion ii. You can change these to whatever name you want; simply brand the according changes in the lawmaking.

In the code, the ‘strings’ array represent what string in the URL the Javascript should await for. Then, information technology volition open the according tab, piano accordion or toggle, according to where that string is plant.

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

But add a new ‘?newopener’ to the ‘strings’ assortment, to open up accordion 4. And and so on.

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

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

Important: to avert whatever negative SEO furnishings from having URLs with parameters ( ?queries ), set a canonical URL to your page.

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

Let me know if everything works for you!

Looking for something else? Search across

2369 Elements

right here:

108 Responses

  1. This is the code:

    document.addEventListener(‘DOMContentLoaded’, role() {
    let accordiontitles = document.querySelectorAll(‘.elementor-accordion-item .elementor-tab-title’);

    let strings = [‘?Emotions’,
    ‘?Veterinary Intendance’

    strings.forEach( (string,i) => {
    if (window.location.href.indexOf(string) > -1) {
    } } )
    }); });

    1. Hey Dave! I added the functionality to the code. Let me know if that works for you!

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

    1. later on some updates information technology works as well in the mobile version thanks a lot!!

    2. Thank you a lot for the lawmaking Maxime. I take the aforementioned effect as y’all Giannis Gk , doesn’t work on the mobile version. Do you remember how you resolved it?

    3. Hasan Farahani It should piece of work fine on the mobile version! Are you lot duplicating your elements or using the same?

  3. Hello At that place,

    i’m using the crocoblock jet-accordion and tab organization.
    Could yous please tell me, what I have to insert in the lawmaking?

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

    2. Hi Stefan,
      did you lot succeed in finding a solution for jet-accordion?
      I am also using it and searching for a solution for information technology.

  4. Is at that place anyway to go to the superlative of the page, I am using the Essentials Addon advanced tabs, and a vertical tab. I’ve used the script, and it works. Simply when linking to individual tabs, it takes me to the middlle of the folio, instead of the top. Any suggestions?

    1. Hey Frederik!

      Try changing this line of code

      scrollTop: desktoptitles.eq(i).offset().pinnacle – 100

      to this

      scrollTop: desktoptitles.eq(0).commencement().top – 100

      So, adjust the ‘100’ value to your liking. It’due south a px value!

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

    1. Do yous hateful with the filters on that gallery element?

    2. Use this code!


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

      let strings = [‘?howdy’,

      strings.forEach( (string,i) => {
      if (window.location.href.indexOf(string) > -one) {
      $(‘html, body’).animate({
      scrollTop: gallerytitles.eq(i).offset().top – 100
      } } );
      }); });

  6. How about the AJAX function? Is it able to phone call this with ajax?

    1. Non certain what you mean hither…

  7. So glad to find this! Can the same logic utilize to the ‘Gallery’ widget?

    1. Aye! With this code:


      certificate.addEventListener(‘DOMContentLoaded’, function() {
      permit gallerytitles = $(‘a.elementor-gallery-title’);

      allow strings = [‘?hello’,

      strings.forEach( (cord,i) => {
      if (window.location.href.indexOf(string) > -i) {
      $(‘html, torso’).animate({
      scrollTop: gallerytitles.eq(i).offset().top – 100
      } } );
      }); });

    2. Maxime Desrosiers THIS Lawmaking IS NOT WORKING WITH GALLERY WIDGET

    3. Sami Azam That code is for the Pro gallery element, when yous take multiple galleries.

  8. hi, thank you for the code, it really works 🙂
    Simply I take a problem, my tab tittles have more than 1 word, how should I write them in the lawmaking?

    1. Hi Jessica!

      Information technology works, no matter what your tabs title are. However, in the code, it needs to be a single cord indeed. These, don’t demand to match with your actual tabs championship.

      And then for case, yous have a tab title ‘How to eat tofu’, then in strings, y’all can simply utilize ‘tofu’, and the URL volition have ?tofu added at the end, to open up the right tab.

    2. Maxime Desrosiers thanks so much 🙂 I have tried and tried and would never have institute out by my cocky. Forever grateful

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

    1. This tutorial is for when you are coming from some other page! The code is different for aforementioned page… Peradventure I will make another article for that.

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

      1. Ho Maxime. THX for this awesome tutorial.
        Can y’all expect into my demo where i out this function and i take problem cause when i click in Push button the Tab open up in the center of content and non at the offset of It.

      2. Y’all have something unrelated to my code going on hither. There is scrolling within scrolling… Try to simplify your page!

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

    4. Maxime Desrosiers cheers for the response. I already subscribed to your mailing list. Thank you. Allow us know for updates 🙂 God Bless

  10. This lawmaking is working perfect !

    1. Thanks!

  11. Thank you for the code just the starting time doesn’t work with responsive websites. I.eastward -100px might work fine on a desktop width but for mobile width the scroll is incorrect.

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

  12. 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

    1. Welcome Waqas!

  13. Hi there

    Thanks for an awesome code, that worked for me earlier.
    But now I have inverse the layout of my page, to use something else.
    I am using Premium Addons Modal Boxes for displaying pictures. – – Is there anyhow I could use the same “straight 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 piece of work with this code :


      document.addEventListener(‘DOMContentLoaded’, part() {

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

      let strings = [‘?howdy’,

      strings.forEach( (string,i) => {
      if (window.location.href.indexOf(cord) > -1) {
      $(‘html, trunk’).animate({
      scrollTop: desktoptitles.eq(i).commencement().top – 100
      } } );
      }); });

    2. Maxime Desrosiers Give thanks y’all! ☺

  14. using the code worked great, thanks! I am using it for an piano accordion and the just issue i am having is the first piano accordion does not open when using the code

    1. using your example would be ‘hello’ does not open up the respective accordion

    2. Andrew Sloan The first accordion is opened by default! In the code, something was needed, to ‘skip’ it essentially. Merely link to it with a normal anchor link, and it volition show up, and be opened. Don’t use the ?hi link for the first accordion.

  15. Hi, i applied the accordion code, nevertheless when clicking on the link it only scrolls to the selected accordion, simply it does not expand … What tin it be?

    1. I don’t know! Transport me your URL

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

      Wrap office of your code in a timeout function

      Afterwards :

      certificate.addEventListener(‘DOMContentLoaded’, role() {


      setTimeout(function() {

      Then at the end, where you see this:


      Write this instead :

      }, 1200); });

    3. Maxime Desrosiers worked like a charm! Thank you!

  16. If you lot don’t desire to hard code all of your strings, you lot can but use the tab titles themselves. Eg, here’due south some instance code to make that happen:…/opening-upwardly-a-specific-tab…/

    1. Yeah I thought of coding information technology this way, only in the cease decided to proceed it simple. Also, if I coded it that way, people would accept asked for command over which URL goes where…. ie write their own url.

      Thanks for sharing your way though, information technology’due south pretty skilful likewise! I prefer it myself, although both work just fine ofcourse.

      Could y’all 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.


      1. Thank you Shaun for the update!

  17. Howdy Maxime. I got it working on my website. Thanks. Is in that location whatever mode to open a tab with a link from the aforementioned page, without refreshing? Just as if i was clicking directly on the tab but using a link or a button isntead? I will really capeesh the assist.

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

        Thank you 🙂

  18. Hi,

    The code doesnt piece of work for me

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

    1. Use the accordion element from Essential addon!

  19. Hullo! I’grand working on an FAQ on Elementor and the code is not working. It’due south still a Toggle, though. Any communication?

    1. Hey Jaime! Sorry I don`t understand your question… Possibly if you could share your page URL I tin can have a wait.

  20. Thanks for the bully tips! Is it possible to get to the EA tabs and open information technology via menu? Because I don’t take any attributes in the card settings. I tin add together only the link there. I want to open (and curlicue in that location) the tabs by using the menu. Cheers in advance!

    1. Yea.. only enter the link with the ?tabtogetto query in in that location.

    2. Maxime Desrosiers Thanks. Do yous know how to apply in ?tabtogetto not-English words? I have titles for tabs in non-English language linguistic communication. Is it possible to utilize other than titles o the tabs ids (I am working in Elementor)? I’ve but tried and it works only with English. And also I’ve noticed that when you are on the aforementioned folio as tabs and you click on the link it reloads the whole folio over again. Is it possible that ?queryoftheobject would work as smooth equally hashtaged link?

    3. Paul Guzenko non-English, you hateful non-latin characters, right? To be honest I don’t know… I never worked with URLs that weren’t in latin, and so it’s not clear to me why information technology doens’t work…

      Re: folio reloading, yes, that will happen…

  21. When i volition apply accordion on another section its not wokring, what to do please assistance

    1. Watch the video to larn more, such every bit how to target simply a specific element on your page!

    2. Maxime Desrosiers i accept three different accotdion on different section sir when i will add together this code its working for 1 section accordion merely ii section squeeze box is not working please check this screnshot

    3. Suraj Mahapatra Did y’all watch the video to learn how to isolate the code to only ane squeeze box?

    4. Maxime Desrosiers thanks for your reply can you please help me for other kind of lawmaking

  22. Hey cheers for this lawmaking.

    ane. The tabs open every bit they should on mobile and desktop, but the scroll function only works for desktop. On mobile, it stays at the tiptop of the page. Is there a mode to set up this?

    two. Also is there was a way to gear up a specific scroll position based on the device existence used? (On Desktop, I take the scroll set to the top of the whole chemical element. On mobile, I would like the scroll to go to the top of the opened tab index)…

    1. Hey Joseph! The code below should piece of work. I added gyre for mobile.


      document.addEventListener(‘DOMContentLoaded’, office() {
      setTimeout(function() {


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

      allow strings = [‘?adrenal’,
      ‘?female’, ‘?male’, ‘?weight’, ‘?brain’, ‘?sleep’, ‘?drive’, ‘?free energy’, ‘?anxiety’

      strings.forEach( (string,i) => {
      if (window.location.href.indexOf(string) > -1) {
      $(‘html, torso’).animate({
      scrollTop: isDesktop ? desktoptitles.eq(0).offset().elevation – twenty : mobiletitles.eq(i).get-go().top – 20
      } } );
      }); }, 1200); });


      1. Maxime Desrosiers Dude thanks

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

        Thanks a loot,

      3. Thanx it works for me when i change mobiletitles.eq(i) to mobiletitles.eq(0)

  23. Hey guys! Is this possible on element hover (Image hover trigger)? Thanks!

    1. Yes, follow the tutorial Elementor Tab, Toggle or Squeeze box Remote Control instead of this one!

  24. Hi at that place! 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 and then the inner tab? Cheers again

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

  25. How exercise I make the 2nd tab to open within an elementor popup?

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

      setTimeout(function() {


      permit desktoptitles = $(‘.elementor-tab-desktop-title’);
      let mobiletitles = $(‘.elementor-tab-mobile-championship’);


      }); }, 200);

      1. Thank you very much! 🙂

  26. Hello, i need assistance with a footling css code,

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

    Thx for the help and this excelent post 🙂

  27. Hi Maxime, is there a way to make that code open up the links at the same page working like an anchor? Thx so much

  28. Do y’all accept a Expand All / Close All button code?

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

  30. Funny – the weblog here did change the & u u g 50 ; and the & # 2 five 2 ; too in my above respond! Didn´t await that. Hope it tin be read now…

  31. Hi,
    First off, thank you for this tutorial; however, I am having a bit of a problem because I am using ElementsKit Squeeze box plugin with Elementor. Perhaps you may assistance me with this situation. The site is I’m utilizing a megamenu to admission each accordion and open information technology initially. All accordions are airtight by default on Elementor.

    1. Hey J.

      Use this lawmaking, it should work!


      certificate.addEventListener(‘DOMContentLoaded’, function() {
      setTimeout(function() {

      let accordiontitles = $(‘a.elementskit-btn-link’);

      let strings = [‘?how-do-you-do’,

      strings.forEach( (string,i) => {
      if (window.location.href.indexOf(string) > -1) {
      $(‘html, body’).breathing({
      scrollTop: accordiontitles.eq(i).offset().top – 100
      } } );
      }); }, 1200); });

      1. Cheers, Maxime, you lot’re the all-time. All the same, when I’m on the same page and click on a button, the other accordion does not open, requiring me to reload the page and employ the clickable buttons once more. Overall, I’m guessing information technology needs a location.reload(); Cheers once more, Maxime.

  32. How-do-you-do Maxime, do you have the code for faq widget? I used the piano accordion code for my faq, needless to say it didn’t work.

    1. Hey Gabriel!

      I’m not certain what y’all hateful hither. Elementor doesn’t have a FAQ element… possibly you got one from an addon? Or, what practice you lot mean?

  33. Is there a Code for the “Advanced Tab” from Happy Addons for Elementor?

    1. I have figured it out:
      allow desktoptitles = $(‘.ha-tab__title–desktop’);
      allow mobiletitles = $(‘.ha-tab__title–mobile’);

  34. Hello Maxime, I got my accordion to open on the click of an icon, but I can’t get it to shut? Is there a fashion to do this?

    1. Hey Ricardo!

      This tutorial isn’t really meant for that. Nonetheless with the code below, it should piece of work fine.

      <script>  document.addEventListener('DOMContentLoaded', office() { jQuery(function($){      let accordionTitles = $('.elementor-squeeze box-particular .elementor-tab-title');  allow openers = document.querySelectorAll('[data-accordion-open up]');  openers.forEach( (e,i) => { e.addEventListener('click',part(){ let openThis = e.getAttribute('data-accordion-open'); accordionTitles.eq(openThis).click(); $('html, torso').animate({ scrollTop: accordionTitles.eq(openThis).showtime().top - 100 },'slow'); }); }); } ); });  </script>

      1. OMG y’all are the best. Give thanks you soooo much Maxime. Give thanks you Thanks 🙌

      2. Welcome!

  35. Maxime you are the king! Thanks and so much for this tutorial! It works bang-up for what I’m trying to reach exept ane minor thing that bothers me… In that location is a delay betwixt the loading of the page and actually going to and opening the tab (2-3 seconds), whatever thought if information technology’s possible to speed this up somehow?

    1. Hey Capucine!

      I agree it’south bothersome! It used to exist quicker just with an update Elementor changed their code a flake and now that’s the simply way it works…

      You can try decreasing the 1200 value you will find in the code, but so it might cease working for some visitors.

  36. This is nifty information, I have this working well on a website with tabs.
    However, I take an issue with EA Advanced Squeeze box.
    I believe the trouble is in that location: let desktoptitles = $(‘.eael-tabs-nav li’);
    as I am getting: Uncaught TypeError: desktoptitles.eq(…).offset() is undefined

    The accordeon is virtually the bottom (Liste des exposants) and the link to open should be:

    1. Hey Michel!

      Information technology wasn’t working because you are using the accordion chemical element, not the tabs element. And that code was for the tabs chemical element.

      Here is the working code for EA Avant-garde Accordion:

      document.addEventListener('DOMContentLoaded', function() { setTimeout(function() {  jQuery(function($){  let desktoptitles = $('.eael-accordion-list .elementor-tab-championship');  let strings = ['?exposants'];  strings.forEach( (cord,i) => { if (window.location.href.indexOf(cord) > -1) { desktoptitles.eq(i).click(); $('html, trunk').breathing({ scrollTop: desktoptitles.eq(i).offset().acme - 100 },'ho-hum'); } } ); }); }, 1200); });

  37. Super!!!
    Thanks for the quick response.

  38. Is information technology normal that at that place is a short delay on
    pageload? So I mean, i set a link on a Push with the ?bonjour. In the starting time 2nd the Tab ?hello is shown and than information technology jumps to ?bonjour if I load the Page. It could confuese the User and does non Look that great. Is it possible to show the specigic Tab instant after click the Button and load the Folio?

    Peradventure u can help. Cheers in advance.
    Best Regards

    1. Yes it’due south normal and it’southward required, unfortunately. An Elementor update changed the way the JS was loaded for that element and now that’s the but way it will work at all.

  39. Maxime,

    Sorry, me over again…
    I am having an issue afterward adding a second EA for just mobile version.
    At present the mobile version works and desktop version nigh works except, after scrolling downwardly to the Accordion and open, it roll back to the height. I’ve tried a number of things such as creating 2 html and hiding one or the other, tried giving a CSS Class ID to both merely unsuccesfull. this is the code I have now:

    document.addEventListener(‘DOMContentLoaded’, function() {
    setTimeout(function() {


    let desktoptitles = $(‘.eael-accordion-list .elementor-tab-championship’);

    let strings = [‘?exposants’];

    strings.forEach( (string,i) => {
    if (window.location.href.indexOf(string) > -1) {
    $(‘html, body’).breathing({
    scrollTop: desktoptitles.eq(i).first().pinnacle – 220
    } } );
    }); }, 1200); });

    document.addEventListener(‘DOMContentLoaded’, office() {
    setTimeout(function() {


    let mobiletitles = $(‘.mobile .eael-squeeze box-list .elementor-tab-title’);

    let strings = [‘?exposants’];

    strings.forEach( (string,i) => {
    if (window.location.href.indexOf(cord) > -1) {
    $(‘html, body’).animate({
    scrollTop: mobiletitles.eq(i).start().top – 220
    } } );
    }); }, 1200); });

    1. Good tries…. yous were close. Hither is a version that should work fine. Requite the class ‘desktop’ to your desktop accordion.

      document.addEventListener('DOMContentLoaded', function() { setTimeout(part() {  jQuery(function($){  let desktoptitles = $('.desktop .eael-accordion-list .elementor-tab-championship'); let mobiletitles = $('.mobile .eael-squeeze box-list .elementor-tab-title'); let isMobile = window.outerWidth < 768;  let strings = ['?exposants'];  strings.forEach( (string,i) => { if (window.location.href.indexOf(string) > -ane) { isMobile? mobiletitles.eq(i).click() : desktoptitles.eq(i).click(); $('html, trunk').animate({ scrollTop: isMobile? mobiletitles.eq(i).starting time().height - 220 : desktoptitles.eq(i).starting time().top - 220 },'tedious'); } } ); }); }, 1200); });

  40. I was really shut, I had try this last code equally well just was missing the “isMobile” function.
    I guess “shut plenty” is the aforementioned every bit “not practiced plenty”…
    Merely all working now.
    United nations gros merci!


Popular:   Crisis on Infinite Earths Wiki