Get Premium

Elementor Open Specific Tab, Toggle or Accordion on Link Click

Element.How also offers premium tutorials! Check them here:

Table of Contents

In this tutorial you will learn how to link to a specific Elementor accordion, tab or toggle, directly from the URL.

I have now updated this tutorial so that it works for same page links: click a link or a button that links directly to an Elementor accordion, tabs or toggle, and it will:

  1. Automatically open the related tab or accordion (and keep it open if it already was)
  2. Scroll to the proper tab or accordion
  3. For the accordions and toggles, it will wait 0.4s before scrolling, so that the layout shift from the opening and closing is done, and the scrollTo position is accurate

Works whether coming from another page, or clicking an anchor on the same page!

Ready? Let's learn how to open specific Elementor 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!

Watch the excellent video by Imran:

If you would like even more features, check the Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Images Premium tutorial. This is what that premium tutorial shows you:

Features from that premium tutorial:

  • Great UX: Automatically scrolls to the center of the clicked item
  • PageLoad Smart: Automatically scrolls to the center of the current menu item (if one of them is the current page), current taxonomy filter, or current tab
  • Open Tab: Scroll to and open the proper tab on page load through an ID in the URL (site.com/#example-id)
  • Auto Scroll Back Up: On Tab Switch, automatically scroll back up to the top of the tabs element. Useful if your tabs titles are sticky

 

Back to the current tutorial:

To start with, add an HTML element and copy paste the code in

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.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Open Specific Tab, Toggle or Accordion on Link Click tutorial 
 * Found at this URL https://element.how/elementor-open-specific-tab-toggle-accordion/ 
 */ 
</script>

Then, add IDs within your tabs or accordion titles

For the new Elementor Tabs and Accordion elements

If you are using the new Elementor Tabs and Accordion elements, you will see an ID field close to the title field:

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

Simply enter your IDs there. I recommend you keep it lower case.

For the old Elementor accordion or toggle titles

If you are using the old Elementor accordion or toggle titles, you will want to copy paste this:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Open Specific Tab, Toggle or Accordion on Link Click tutorial 
 * Found at this URL https://element.how/elementor-open-specific-tab-toggle-accordion/ 
 */ 
</script>

Copy within the title directly, and change hello to the ID of your choice. This will be the #anchor.

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

All IDs need to be unique.

For the old Elementor tabs

Avoid using the old Elementor tabs, it won't work properly as Elementor is automatically duplicating the title in the DOM, resulting in duplicate IDs, and scrolling to the top of the page on mobile.

Now, add link to your tabs or accordion titles

Now all that's left to do is to add links wherever you want, as you normally would for any anchor.

yourwebsite.com/#your-tab-id-here

Adjusting the code

The code really takes care of pretty much everything automatically here.

The only part you might want to change is this line:

let scrollOffset = 200; /* scroll offset from the top of title */

Adjust the 200 as you wish.

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

That's right! It's that simple with the new version.

Important: the code for this tutorial was completely rewritten end of November 2023, so the earlier comments below might not be too relevant anymore.

Let me know if everything works for you!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

316 Responses

  1. Hi Maxime,
    I am making links from a dropdown menu to tabs and it's working pretty well. If you go to https://frank23stg.wpengine.com/ and go to the Reimagining Education dropdown in the slide-in menu those are the links to the tabs. A few questions:
    1—If my tabs turn into an accordion on tablet and mobile, do I need the accordion and toggle code as well? Seems to work better if I do.
    2—On mobile, the tabs open too far down the page to show all of the toggles. There is space above the widget, but when I change the offset value, nothing changes. If I could only move the widget up about 30px it would work.
    3—On mobile, when I manually open a toggle, if it's a toggle below the open one it opens in the middle of the content not with the toggle visible at the top. Is there a way to fix that?

    2. Greetings Pete!

      1. No you don't need the accordion code. The code for the tabs element considers that it turns into an accordion on mobile.

      2. Change this line:

      scrollTop: scrollTopElems.eq(0).offset().top - 160

      to this:

      scrollTop: window.innerWidth < 768? scrollTopElems.eq(i).offset().top - 160 : scrollTopElems.eq(0).offset().top - 160

      3. That's unrelated to the current tutorial, it's more of a fault with Elementor's tabs element. Still I could fix this with JavaScript, however I don't have it ready so it would be custom work.

      Hope this helps!

      Cheers

  3. Thank for all your help with this!

    I have some odd behavior happening. I have tried placing a numerical value in the Elementor Toggle titles using the following (as an example) ... 1001

    When I link to those it does open a toggle, but it is the one AFTER the one being targeted. So if I link to ?2002 it opens the toggle with 2003 in the title.

    A similar oddity is when I link text as you originally suggest, it then opens the toggle BEFORE the one I'm targeting. See ?participate

    https://connectingfstg.wpengine.com/test/

    Here's my code:

    window.addEventListener('load', function() {
    setTimeout(function(){
    jQuery(function($){

    let toggletitles = $('.url-controlled-elem .elementor-toggle-item .elementor-tab-title');

    let strings = ['?participate',
    '?1001',
    '?1002',
    '?1003',
    '?1004'
    ];

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

    Can you see what I'm doing wrong?

  4. Hi Maxime!
    Opening a specific accordion tab from an anchor link is exactly what i am looking for! However I have an issue in that my first accordion section doesn't automatically open. All the other sections open when directed to them. Can you please advise? I'm using wordpress 6.2.2, php version 8.2.7.

    Can you tell me if there is anything I am doing wrong?

  5. Maxime, works great, thank you so much!

    I have also implemented your horizontal scroll for new tabs widget which also works and looks great. However, when I open the link to the corresponding tab, the tab opens great but it does not scroll to the selected tab title.

    Is there a way to have the tab title visible after opening the link with the horizontal scroll feature?

    This doesn't matter much on desktop as I can see all the tabs. But only affects the mobile view because the selected tab is out view.

    Any help would be great! Cheers!

    1. Hey Corey!

      Could you share your URL with me where you have this setup? I will have a look. I think it should be working...

      2. Not certain if this will work, but try changing:

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

        to

        desktoptitles[i].click();
        mobiletitles[i].click();

        If it's not working, try changing

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

        to just

        desktoptitles.eq(i).click();

        or

        desktoptitles[i].click();

      3. You're awesome!

        Changing:

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

        to

        desktoptitles[i].click();
        mobiletitles[i].click();

        Works perfect! Thanks Maxime!

  6. Hi Maxime, this is exactly what I'm looking for! Unfortunately, it doesn't seem to work for me 🤷🏽‍♀️

    I'm using the new tab widget (with nested functionality) so I replaced the 2 lines as instructed. I have also added the class to the tab widget and renamed the strings as I would like to have them.
    https://ambitionprofile.com/our-personas/

    This is the code I'm using, am I perhaps missing something?

    window.addEventListener('load', function() {
    setTimeout(function(){
    jQuery(function($){

    let desktoptitles = $('.url-controlled-elem .e-n-tabs-heading > .e-n-tab-title');
    let mobiletitles = $('.url-controlled-elem .e-n-tabs-content > .e-n-tab-title');
    let scrollTopElems = window.innerWidth {
    if (window.location.href.indexOf(string) > -1) {
    desktoptitles.eq(i).click();
    mobiletitles.eq(i).click();
    $('html, body').animate({
    scrollTop: scrollTopElems.eq(i).offset().top - 100
    },'slow');
    } } );
    });
    }, 300);
    });

    All the best!

  7. Hello,

    Can this code be utilized to open an accordian based upon a selected primary category within a post? I have a set of categories: 1, 2, 3, 4 that correspond to accordians on the page. Each accordian corresponds to different content.

    Thanks !

    1. Hey Brett!

      Not really... it would need to be modified and adjusted to your particular setup.

      It's very specific and out of the intended scope of this tutorial, so it's something I could offer as custom work only. If you are interested, reach out to me! (email or messenger in footer).

      Cheers!

      1. Custom work would be great! you helped me with a project earlier this year which turned out great.

  8. Hello. I have an accordion from ElementsKit. I tried adding your code to open a section of the accordion but for some reason it is not working. My site is https://rypl.io and the accordion is at the very end. Can you please have a look and let me know if I am doing something wrong? Thanks so much. I have been searching for a solution like this and if I can make it work it would be so helpful. Thanks again!

  10. Hi,

    It seems like Elemntor Accordion widget was also updated, and the code provided doesn't work with it anymore. They changed classes to .e-n-accordion and probably something else.

  11. Hello,
    I'm trying this code with the nested elements Accordeon (latest versions of Elementor). I've added a button on the homepage and I want that when you click it you go to the contact page and open the first item of the accordeon.

    So I did:
    > Homepage button with link to: /contact/?denhaag
    > Contact page I added this code right under the accordeon:

    It goes to the contact page but not to the accordeon and the first tab isn't open...

    What am I doing wrong ;')

    1. Greetings!

      I didn't have the code yet for the new accordion element...

      I updated the tutorial just now for it, and I also updated the way everything works: we no longer use ?, instead we are using #.

      Cheers!

      1. Thank you! It works so far, when I click the button I go straight to the accordeon so that works perfect but it doesn't open a the tab... 🙂

      2. This tutorial is for links from another page... are you coming from another page or from the same page?

  12. Yes, like I said in the previous comment. I have buttons on the homepage and they need to go to the tabs on the contact page.. This works but the tabs wont open..

      1. Oh and totally forgot 😉 it's on the homepage and then you can click on the round button with "Locatie Den Haag".
        And would you be so kind to delete the previous comment with the link to my site? 🙂

      2. Greetings!

        Delete this line, it's only useful when the first accordion item is opened by default:

        if (i !== 0) accordiontitles.eq(i).click();

        Cheers!

    1. Under Advanced > CSS Classes, you have the class name twice... it should be there only one time: url-controlled-elem

    1. I just updated the tutorial with new and improved code, please import the code again in your HTML element. It should work even better now!

      2. And now with the new updated code it should even work when you are on the same page, and clicking that link!

  15. Hello! I used the new code, all seems to be working from the URL Bar. 🙂 However i have the anchor linked on the page in the first tab and it does not seem to be opening the tab when I click on it.

  20. Hi Maxime! How is going? Thank you for all your very helpful tutorials! I need you in this situation: I have four tabs with accordions inside. I created some custom links in the footer, each of which opens a tab. Why do only two links work? I checked all the parameters and they are correct. As if the code only works for two specific tabs. Do I need to enable something? can you help me?

    2. Hi Maxim, thanks for the reply. I'm working locally. However, I solved it by inserting the span id in the title. Having the latest version of Elementor Pro, I thought it was enough to enter a unique name in the css id field in the tab properties... Anyway, thanks and as soon as I publish my e-commerce I'll write to you so you can look at it and tell me what you think. I would be very happy! See you soon

  21. Hi Maxime, this feature will be really helpful for me. I have tried using the code but I am having difficulty loading into Elementor and publishing the page. After entering all the CSS ID's for the tabs the webpage crashes before it publishes. I was able to get it to work for one of the tabs however the page bounce jumps several times before it lands on the open tab. Could you assist me with this?

    Here is my page example: https://bpsweb.org/faq/#cpd

    1. Hey Alex,

      You have like 4 snippets of code trying to do the same thing on your page... keep just one. It will fix the bouncing problem.

      Also regarding this: "After entering all the CSS ID's for the tabs the webpage crashes before it publishes."

      So the only thing you are doing is entering IDs for the tabs, and that crashes the editor? Sounds like quite a bug... consider reporting it on Elementor's github https://github.com/elementor/elementor/issues .

      If you can't add IDs direclty, use the <span> method instead then (see tutorial).

  22. Hey Maxime,

    Thank you for the very helpful tutorial!

    This works perfectly for me, but I'm facing a problem like the one in this article https://stackoverflow.com/questions/44715709/scroll-to-an-anchor-with-multiple-anchor-in-url .

    I have multiple nested tabs and I'd like to create a URL such as domain.tld/sub/#point1/#point2 that will open the top level tab and then open the second, nested tab.

    Currently using the code you provided and the CSS ID's it will open the nested tab within the top level tab, however by default the first top level tab will remain open and the automatic navigation won't work.

    The structure is as follows: First set of tabs (let's call them top-tab from 1-5 i.e. top-tab-1). Nested tabs within each of these 5, (nested-tab from 1-3). If I link to .top-tab-1 .nested-tab-1 or .top-tab-1 .nested-tab-2 using the single CSS ID (URL: domain.tld/sub#top-tab-1.nested-tab-2) – this works perfectly.

    If I link to .top-tab-2 .nested-tab-1 (URL: domain.tld/sub#top-tab-2.nested-tab-1) - nothing happens.

    I hope that makes sense.

    Any assistance would be greatly appreciated!

  23. Hello, thank you for the great work, I have the the latest version of elementor and am having an issue, all is set according to the instructions and the links seem to link fine to the relevant tabs however on reaching the expected tab it immediately automatically scrolls back to the top of the page, how can I solve this? Here is the link https://test.techdotsconsult.com/

    1. sorted the issue by modifying the setTimeout function to this:

      setTimeout(function () {
      const scrollTarget = document.getElementById(anchor);
      if (scrollTarget) {
      const scrollPosition = scrollTarget.getBoundingClientRect().top + window.pageYOffset - scrollOffset;
      window.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
      });
      }
      }, timing);

  24. Also is there a way we can link to a specific section of an elementor popup, my popup is longer than screen height and so would like to link to specific sections on only from the page but also from the top of the popup linking downwards

    1. Hey John!

      This is possible but I don't have a tutorial for this. I could do it as custom work though, if interested please reach out to me!

      Cheers!

  25. Hi Maxime,

    The code is working great! Thanks for that.
    However, the let scrollOffset = 200; /* scroll offset from the top of title */ is not doing anything when I change the value.

    I want it to give it more offset so that the tabs are not covered by the sticky header.

    Check http://www.isconnect.com.au (scroll down to Our Creative Services) and then click any of the links to go to the page where the tabbed content is so you can see how the header is covering the tabs.

    Any ideas?

    I saw a similar question here but couldn't find the line of code you suggested the other person to update (scrollTop: desktoptitles.eq(i).offset().top - 100) so couldn't test this solution.

    1. Greetings Martin!

      I don't support elements from third party elements anymore in this tutorial, as Elementor now (with their new tabs element) has the equivalent functionality.

      I would suggest switching over to the native Elementor tabs element and then it should work!

      Cheers!

      1. Hi Maxime,

        Thanks!
        I recreated the tabs with the native Elementor widget and it's working OK.

        However, when I get to the page where the tab is, from the link on the different page, the selected tab has an outline around it.
        This only seems to happen if the tab open is triggered by the anchor link. If I browse the tabs on the page, the outline does not appear.

        How can I get rid of that?

        Cheers!

      2. Hey Martin!

        This is just how browsers work with anchors and elements with ID... removing it isn't a good idea as it's there for accessibility reasons too.

  26. Yeah, can’t have that as it looks odd. I’ll investigate how to remove it as I have done with other elements in past. But more importantly, the functionality on mobile is acting weird. If I click a tab, the tab opens but the page scrolls up.

    Check here:
    https://isconnect.com.au/how-we-work/

    It happens when clicking a tab thats under a tab that is already open.

  27. Hi, thanks so much for this - its' exactly what I'm looking for.

    One thing I'm finding though is that if I'm on the page with the accordion and I'm on a part of the page above the actual accordion item and then click a link to get to that specific accordion item - it takes me too far down the page.

    However, If I'm below the accordion item or just clicking to the link from a separate page, it works as intended (meaning the offset is typically working as intended)

    Is there something that might be affecting the code when I'm above the item position on the same page? I hope this makes sense!

    I appreciate your help in advance!

    1. Greetings Sam!

      Did you change the animation speed from the default '400' ?

      If so, you have two choices:

      1. Get it back to '400' (in the Elementor UI for the accordion settings)
      2. In the code, change the 400 in the line timing = 400; to your animation speed.

      Cheers!

      1. Thanks Maxime! Switching it back to 400 worked. I guess I'll keep it at that. Thanks so much for your tutorial and quick reply, I really appreciate it!

  28. This works great on my Windows PC (Chrome, Firefox, & Edge browsers) & Android phone (Chrome), but not on my or a friend's iPad (Safari browser). Is there a fix that will work for iOS devices as well as Windows & Android?

      1. Thanks, it seems that my iPad is too old (iOS 12.5.7). Tried it on a newer one & it works. Love it!

  29. Hi Maxime,

    Thanks for this awesome tutorial - works like a charm.
    I'd like to combine this with the functionality to also scroll to the top of an active Accordion Tab when it is clicked to have a more consistent experience. Any pointers on how to combine this behavior or add this to the existing code?

    Really appreciate any help 🙂

    1. This function kind of works the way i want, but its a little buggy and i think this could be incorporated in your OG script somehow?

      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $(".e-n-accordion-item-title").click(function() {
      var self = this;
      setTimeout(function () {
      $('html, body').animate({
      scrollTop: $(self).offset().top - 100,
      }, 'slow');
      }, 400);
      });
      });
      });

  30. Hi Maxime,

    This code works great! My only issue is on mobile - when I click from a different page to a link that takes me to a sub-item in the accordion, it only starts scrolling once I touch the screen. So if I don't touch the screen it doesn't scroll to where it should go and just stays too low. Could it be something with the way the page loads? Let me know if this is clear or not and if you have any solution. Thanks so much!

    1. Hey Sam!

      You have some "Delay JS" enabled in your optimization plugin, you would need to add exclusions so that the code I share here runs on page load and isn't delayed.

      Cheers!

  31. Hello! This worked perfectly, thank you! I have a little bit of a weird use case. I have a tab element, whereas within tab #3, I nested another tab element. I tried following these steps to directly link to one of the tabs within that nested tab elementit, and while it opened the nested tab, it did not open the parent tab it was in. Any suggestion on how to make this work?

  32. Hi Maxime,
    first of all: Thanks a lot for this resource! It works quite well.

    May I ask of an additional feature people might find useful?
    How would we get the accordion also to close when the link is clicked again?

    (You actually already provided a solution in an earlier comment, but that does not seem to work anymore.)

    Cheers
    Alex

    1. Greetings Alex!

      To toggle instead of open, change this line:

      if (title.getAttribute('aria-expanded') !== 'true' && !title.classList.contains('elementor-active')) title.click();

      to just this:

      title.click();

      Cheers!

  33. Hi Maxime,
    Thanks a lot for this resource! It works quite well.
    I'm using elementor menu with ID to open tabs, its working fine but we are not able to maintain active state for the clicked menu. Can you guide us on how we can have active state for menu when respective tabs are open or respective menu items are clicked.

    Thanks in advance.

    1. Greetings Umm,

      This is quite complex. In short, it won't work along with giving IDs to the tab titles.

      If you really need the active state on the menu, depending on which tab is active, you would be better to avoid tabs altogether... otherwise you will probably have to do without it...

      Cheers!

  34. Hello Maxime and thanks for this excellent code.

    Is it possible to remove any animation/scrolling and stay at top when the user is landing to the page containg the tabs?
    In fact I need the visitor to stay at top of the page, and when he scrolls down, sees the correct tab activated.

    I can achieve this by using a large scrollOffset value but the page initially appears on tabs level and then it is animated to the top.

    Thanks again

    1. Greetings Triton,

      Sorry this isn't possible with the current code. The anchor is in the URL, and the ID is in the markup, so scrolling to the ID is browser native behaviour that happens before any JS even runs, so it can't be prevented.

      You would need to have an #anchor in the URL that isn't present anywhere on the page, and adjust the JS to still respond to that to open the tab.

      As it's quite custom and not what most people would want here I won't be coding this functionality... hope you understand.

      Cheers!

      1. Thanks Maxime.

        I appreciate your time to reply.
        Browsing your replies here I found your much more efficient solution of pseudo tabs which solves my issue.

        Thanks a lot.

  35. Hey Maxime Good Day,

    If this was answered before I do humbly apologise in advance. Your code works great to open the tabs when clicking on the link btw. The question I have is, when on the mobile using elementor tabs, when you click on a tab it would open to show you the content but when you click back on the same tab to close it, it doesn't close. Instead you would have to click a different tab to close the previous tab that was initially opened. This is for mobile, is this a problem only happening with me or its a known problem?

  36. Hi Maxime,

    Thank you for your effort and help to the Elementor community but this doesn't work for me on my page. Tabs open via link only while I am logged in to the WordPress. When try the same while I am logged out it doesn't work, it just won't open tabs.

    Can you help me with this?

    Thanks, Marko

    1. Greetings Marko,

      Try temporarily disabling your optimization plugin, see if that fixes it.

      If it does, then it means the issue lies there. Probably you will need to exclude the code from Delay JS.

      Cheers!

    1. Greetings!

      It should work fine I think.

      You will need to get it to show in the ToC though, so instead of entering the ID, you would need to enter <h4 id="tab-id"></h4> or something like this.

      Cheers!

    1. Greetings Kristine!

      Please be certain that all your IDs start with a letter {A-Z} or {a-z}

      Then it should work fine.

      Cheers!

    1. Greetings,

      This tutorial is specifically for the Elementor accordion element. I could not see it on your page... I just found something called "cky-accordion".

      1. Section "Jak działa HelpeR w praktyce?" is made with Elementor Accordion

      2. On mobile it works better. When I click the element it is scrolling me to the top and scroll down to the accrodion. The tab has been changed.

    2. Greetings!

      Okay I found it. Looks like it's a Tabs element, not an Accordion element...

      The issue you are having is because you have the same ID twice on your page, one time for desktop and one time for mobile. This won't work. The code tries to scrolls to the ID of the element that's hidden, can't find it on the page, so scrolls to the top of the page.

      Avoid duplicating this element on mobile, instead have the same element on desktop and mobile.

      Cheers!

  41. It doesn't work for me 🙁

    I added the HTML code above the tabs, as shown in the video.

    And then gave the tabs an ID (as I know how anchors work). I try to send to specific tabs from my menu, but I just get tab 1 open all the time by default.

  42. Is there any way to get the scrolling to work properly when using responsive mode and having two different tab elements, one for mobile and one desktop? The mobile version seems to work, but the desktop version will scroll down to the tab and then back up to top of page.

    page in question, change (dot) to .
    subscanusa(dot)com/contact/#tab-schedule

    1. Hey Kyle!

      Sorry, I suggest using the new Tabs Element instead, it should be responsive by default, without duplication.

      Otherwise the issue is that you need to have duplicate IDs, and that's causing issues (as well as not following HTML5 specs).

      Cheers!

      1. well, that was fast. 🙂

        I'm pretty sure I'm using the new tabs element and while it does have a lot of options in responsiveness, it won't let me change the title of the tabs to make them shorter so they will fit properly in mobile-portrait without having to scroll horizontally.

        It seems to work ok other than the scrolling issue, how would I remove the scrolling feature?

        Thanks!

    2. Hey Kyle!

      Yes I see you are using the new tabs element indeed. In your case the issue is just as you say, you duplicated it and used the responsive settings to show one on desktop, the other on mobile.

      This won't work for the reasons I mentioned...

      You have two fixes:

      1. As you suggested, remove the scrolling. Do that by deleting this code:

      setTimeout(function () {
jQuery('html, body').animate({
scrollTop: jQuery(scrollTarget).offset().top - scrollOffset,
}, 'slow');
}, timing);

      2. Switch to only one tab element.

      To make the titles shorter, write two titles, each in their own <span> elements.

      Something like this:

      <span class='desktop-only-title'>Title here which is long</span><span class='mobile-only-title'>Short Title</span>

      Then add this CSS:

      @media (max-width:1024px) {
      .desktop-only-title {
      display: none;
      }
      }
      @media (min-width: 1025px) {
      .mobile-only-title {
      display: none;
      }
      }

      I hope this helps

      Cheers!

  44. I've tried on several different staging sites, disabled plugins, etc., but am having the same result as Laura's comment (16/07/2024). Regardless of the permalink, the default first tab is the only one that opens. I thought it might just be a caching issue, because initially I had [partial] success. I'm at a loss ...

  46. Hello Maxime,

    I'm new to this site, and there's some great looking content here!
    I've come across your page because I was looking for code to automatically open a tab from another link. Copying this code into my elementor (pro) page, unfortunately, I can't get it to work, because the elementor tabs don't allow for specific ID assignment. Only the widget itself can be assigned an ID. What type of tab are you using in your example?

  47. thanks for the information but i am using tabs under content switcher and add content via shortcode. I am having two different tab in switcher. your code is working fine with default tabs but it will not work in switcher content

    1. Greetings,

      This is getting complex and out of scope for this tutorial, for specific use case like this, I suggest you find a dev to help you.

      Cheers!

    1. Greetings Daniel,

      Not certain what this is about, but unlikely to be caused by the code provided in this tutorial.

      Cheers!

  50. Thanks code works but it cause another problem
    But it causes another problem
    I have WooCommerce product slider on every Tab and after using this code only one tab shows product slider and other tabs stop showing the slider
    if page load without ancher links only first tab slider work
    if page load with some ancher links only that tab shows the slider

  51. Hi Maxime

    This code is great and works perfectly! I'm using this function on the same page and just want to click the container for it to expand the accordion. How best to remove the scroll effect as it's making the section quite jumpy.

    Cheers van

  52. I'll be honest, I asked Chat GPT about this first, it's answers were terrible compared to yours. Thanks for winning for the humans.

      1. Hi Maxime,

        Thanks for the quick response.

        but the problem is that it works fine on chrome browser but not on firefox

  54. This is working like a dream, thanks so much! I do however have a further request/query. I'd like to be able to add anchors to headings inside tabs. E.g. one tab may have multiple headings. And then if that anchor is provided in the URL, to open the correct tab, and go to that anchor.

    Is there a way this is possible? I guess it would need to detect the closest/parent tab anchor (based on aria-labelledby?) and open that, and then go to the actual anchor that was given?

    1. Hey Sarah!

      Sorry this is complex and out of scope for the current tutorial, it's the kind of thing I custom code for clients that have very specific needs like this. I hope you understand!

  57. This code works while i am viewing the changes to my website (i.e. still logged in to wordpress) but it stops opening the accordion items when I view the website from a browser where I am not logged in. Any suggestions?

      1. Thanks Maxine, Iv cleared the Browser cache, Elementor cache, and the cPanel cache, and im still getting the same behaviour in both Firefox and Chrome.
        here's my site, if you click on an image it should open the corresponding item in the accordion...
        https://sukeythomas.com/algorithmic-design/

    2. Hey Sukey!

      I had a good look at your page, debugged the issue, and it turns out it's some JavaScript from your theme Phlox that's preventing my code to work as it should. Try switching to the Hello Theme, see if it works then (it will!)

      Cheers!

  58. Hi Maxime,

    when i use this script on my website, the scrolldown is jittery/stops once or twice before scrolling to the tab, do you have any idea what could be causing this?

    Thanks

      1. Do you think having multiple tab widgets on one site could be the problem? I'm currently having issues troubleshooting this, the problem also seems to be irregular.

    2. Hey Dan!

      Having multiple tabs element on the same "site" is no problem, on the same page however could be a problem, I think that's probably what you meant.

      Just try temporarily removing a few and see if it helps maybe.

  59. This code no-longer works with Elementor 3.35.0+ due to the changes to the accordion (i.e. .click() does not open the accordion)

  60. Hey there! I tried implementing this on my website and it does not seem to work. I followed the steps and tripled checked everything and I still can't get it to work. Whenever I try the URL with the CSS ID, it simply sends me to the main page; it does not open the tab. Not sure if this helps, but I'm working from the free version of Elementor.

Leave a Reply

Element.How Newsletter

Sign up for our newsletter to get Elementor related updates and tutorials

Close