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
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>
Note: to make it compatible with the new Elementor Tabs element (that allows adding elements within them directly), change the lines
let desktoptitles = $('.elementor-tab-desktop-title'); let mobiletitles = $('.elementor-tab-mobile-title');
to
let desktoptitles = $('.e-n-tabs-heading > .e-n-tab-title'); let mobiletitles = $('.e-n-tabs-content > .e-n-tab-title');
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!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
134 Responses
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>
Hey Dave! I added the functionality to the code. Let me know if that works for you!
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
after some updates it works also in the mobile version thanks a lot!!
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?
Hasan Farahani It should work fine on the mobile version! Are you duplicating your elements or using the same?
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?
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.
Hi Stefan,
did you succeed in finding a solution for jet-accordion?
I am also using it and searching for a solution for it.
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?
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!
What about if we use with elementor pro gallery. classes are (.e-gallery-masonry .elementor-gallery-title)
Do you mean with the filters on that gallery element?
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>
How about the AJAX function? Is it able to call this with ajax?
Not certain what you mean here...
So glad to find this! Can the same logic apply to the 'Gallery' widget?
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>
Maxime Desrosiers THIS CODE IS NOT WORKING WITH GALLERY WIDGET
Sami Azam That code is for the Pro gallery element, when you have multiple galleries.
hi, thanks for the code, it really works 🙂
But I have a problem, my tab tittles have more than 1 word, how should I write them in the code? http://prntscr.com/w5k9c0
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.
Maxime Desrosiers thank you so much 🙂 I have tried and tried and would never have found out by my self. Forever grateful
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.
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.
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?
Ho Maxime. THX for this awesome tutorial.
Can you look into my demo where i out this function and i have problem cause when i click in Button the Tab open in the middle of content and not at the start of It.https://www.menuvirtuale.com/menuapp/
You have something unrelated to my code going on here. There is scrolling within scrolling... Try to simplify your page!
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!
Maxime Desrosiers thanks for the response. I already subscribed to your mailing list. Thanks. Let us know for updates 🙂 God Bless
This code is working perfect !
Thanks!
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.
Yes indeed, depending on your design, the element you are using, the amount of content, and the viewport... some adjustments might be needed!
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
Welcome Waqas!
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. ☺
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>
Maxime Desrosiers Thank you! ☺
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
using your example would be 'hello' does not open the corresponding accordion
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.
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?
I don't know! Send me your URL
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>
Maxime Desrosiers worked like a charm! Thank you!
If you don't want to hard code all of your strings, you can just use the tab titles themselves. Eg, here's some example code to make that happen: https://code.colostate.edu/.../opening-up-a-specific-tab.../
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
Hi Maxime, I'm slow to respond, but I have now referenced your blog post in my own at https://code.colostate.edu/2021/04/01/opening-up-a-specific-tab-toggle-accordion-using-elementor/. I adapted my code a bit more (to more succinctly accommodate tabs, accordions, and toggles without less code) and thank you for your original contribution!
Thanks Shaun for the update!
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.
Yes this is possible! I recently wrote a tutorial about exactly that! : https://element.how/elementor-open-specific-tab-toggle-accordion-same-page-button-click/
Hi Maxime, has there been an Update for the refreshing page scenario? Cant find the solution unfortunately.
Thank you 🙂
Yes, follow this tutorial : https://element.how/elementor-open-specific-tab-toggle-accordion-same-page-button-click/
Hi,
The code doesnt work for me
I am using widget Advanced Accordion from Elementor Kit. What should i do? Thx mate!
Use the accordion element from Essential addon!
Hi! I'm working on an FAQ on Elementor and the code is not working. It's still a Toggle, though. Any advice?
Hey Jaime! Sorry I don`t understand your question... Maybe if you could share your page URL I can have a look.
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!
Yea.. just enter the link with the ?tabtogetto query in there.
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?
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...
When i will use accordion on another section its not wokring, what to do please help
Watch the video to learn more, such as how to target only a specific element on your page!
Maxime Desrosiers i have three different accotdion on different section sir when i will add this code its working for 1 section accordion but 2 section accordion is not working https://prnt.sc/13by97z please check this screnshot
Suraj Mahapatra Did you watch the video to learn how to isolate the code to only one accordion?
Maxime Desrosiers thanks for your reply can you please help me for other kind of code
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/...
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>
Maxime Desrosiers Dude thanks
Hey bro, hello. Pls, this code should work also in mobile?
I tried everything, but nothing works :/ Pls should you help?
Website: https://ako-tazit-kryptomeny.sk/asic-antminer-z15-420ksol-bitmain-tazba-zcash/
(click on: Koľko tento miner Zarába - it should react)
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
Hey Dominik! Yes it's possible without page reload, see this tutorial here : https://element.how/elementor-open-specific-tab-toggle-accordion-same-page-button-click/
Thanx it works for me when i change mobiletitles.eq(i) to mobiletitles.eq(0)
Hey guys! Is this possible on element hover (Image hover trigger)? Thanks!
Yes, follow the tutorial Elementor Tab, Toggle or Accordion Remote Control instead of this one!
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
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!
How do I make the second tab to open inside an elementor popup?
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>
Thank you very much! 🙂
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 🙂
Hi Maxime, is there a way to make that code open the links at the same page working like an anchor? Thx so much
Do you have a Expand All / Close All button code?
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.
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...
Hello,
First off, thank you for this tutorial; however, I am having a bit of a problem because I am using ElementsKit Accordion plugin with Elementor. Perhaps you may assist me with this situation. The site is mainstream-engr.com/contact_us I'm utilizing a megamenu to access each accordion and open it initially. All accordions are closed by default on Elementor.
Hey J.
Use this code, it should work!
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
jQuery(function($){
let accordiontitles = $('a.elementskit-btn-link');
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>
Thank you, Maxime, you're the best. However, 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 utilize the clickable buttons again. Overall, I'm guessing it needs a location.reload(); Thank you once again, Maxime.
For this, use that tutorial instead :
https://element.how/elementor-open-specific-tab-toggle-accordion-same-page-button-click/
Hello Maxime, do you have the code for faq widget? I used the accordion code for my faq, needless to say it didn't work.
Hey Gabriel!
I'm not certain what you mean here. Elementor doesn't have a FAQ element... maybe you got one from an addon? Or, what do you mean?
Is there a Code for the "Advanced Tab" from Happy Addons for Elementor?
I have figured it out:
let desktoptitles = $('.ha-tab__title--desktop');
let mobiletitles = $('.ha-tab__title--mobile');
Hello Maxime, I got my accordion to open on the click of an icon, but I can't get it to close? Is there a way to do this?
Hey Ricardo!
This tutorial isn't really meant for that. However with the code below, it should work fine.
OMG you are the best. Thank you soooo much Maxime. Thank you Thank you 🙌
Welcome!
Maxime you are the king! Thank you so much for this tutorial! It works great for what I'm trying to achieve exept one small thing that bothers me... There is a delay between the loading of the page and actually going to and opening the tab (2-3 seconds), any idea if it's possible to speed this up somehow?
Hey Capucine!
I agree it's bothersome! It used to be quicker but with an update Elementor changed their code a bit and now that's the only way it works...
You can try decreasing the 1200 value you will find in the code, but then it might stop working for some visitors.
This is great information, I have this working well on a website with tabs.
However, I have an issue with EA Advanced Accordion.
I believe the problem is there: let desktoptitles = $('.eael-tabs-nav li');
as I am getting: Uncaught TypeError: desktoptitles.eq(...).offset() is undefined
The accordeon is near the bottom (Liste des exposants) and the link to open should be:
https://salondelevenement.com/fournisseurs/?exposants
Hey Michel!
It wasn't working because you are using the accordion element, not the tabs element. And that code was for the tabs element.
Here is the working code for EA Advanced Accordion:
Super!!!
Thanks for the quick response.
Is it normal that there is a short delay on
pageload? So I mean, i set a link on a Button with the ?bonjour. In the first second the Tab ?hello is shown and than it jumps to ?bonjour if I load the Page. It could confuese the User and does not Look that great. Is it possible to show the specigic Tab instant after click the Button and load the Page?
Maybe u can help. Thanks in advance.
Best Regards
Yes it's normal and it's required, unfortunately. An Elementor update changed the way the JS was loaded for that element and now that's the only way it will work at all.
Maxime,
Sorry, me again...
I am having an issue after adding a second EA for only mobile version.
Now the mobile version works and desktop version almost works except, after scrolling down to the Accordion and open, it scroll back to the top. 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 but unsuccesfull. this is the code I have now:
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
jQuery(function($){
let desktoptitles = $('.eael-accordion-list .elementor-tab-title');
let strings = ['?exposants'];
strings.forEach( (string,i) => {
if (window.location.href.indexOf(string) > -1) {
desktoptitles.eq(i).click();
$('html, body').animate({
scrollTop: desktoptitles.eq(i).offset().top - 220
},'slow');
} } );
}); }, 1200); });
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
jQuery(function($){
let mobiletitles = $('.mobile .eael-accordion-list .elementor-tab-title');
let strings = ['?exposants'];
strings.forEach( (string,i) => {
if (window.location.href.indexOf(string) > -1) {
mobiletitles.eq(i).click();
$('html, body').animate({
scrollTop: mobiletitles.eq(i).offset().top - 220
},'slow');
} } );
}); }, 1200); });
Good tries.... you were close. Here is a version that should work fine. Give the class 'desktop' to your desktop accordion.
I was really close, I had try this last code as well but was missing the "isMobile" part.
I guess "close enough" is the same as "not good enough"...
But all working now.
Un gros merci!
I can't get this to work for Elementor tabs. It does work for the Essential Addons version, but of course I've already built a bunch of pages with the regular Elementor tabs module.
Here's my code:
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
jQuery(function($){
let desktoptitles = $('.elementor-tab-desktop-title');
let mobiletitles = $('.elementor-tab-mobile-title');
let strings = ['?ourwork',
'?meettheteam',
'?impacts'
'?support'
];
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); });
and here is what I'm trying to put in for the third tab: https://jcfgives.org/about/?impacts
Hey Melissa!
It's a simple typo. You need a comma after every string (except the last one), and you don't have one after '?impacts'
Hey! How to use code for tabs for "element pack" widget tabs ?
Hi thanks for the code, I cannot make it work for Exclusive Addons Tab widget, any ideas?
Hi, How can i open a specific toggle on a specific page?
I want every page to have a different toggle open as default.
Thank you!
How to disable the URL in the title accordion Elementor?
Warning from Lighthouse
Links are not crawlable!
Search engines may use `href` attributes on links to crawl websites. Ensure that the `href` attribute of anchor elements links to an appropriate destination, so more pages of the site can be discovered.
Elementor uses a <a> tag for the Tab titles. We can't change that. It's fine tho... you may safely ignore that warning
Does this code still apply for the EA advanced accordion widget? I'm not seeing let desktoptitles = $('.elementor-tab-desktop-title'); in the source code anywhere.
I copy and pasted the code directly as is into an HTML widget below the accordion and only modified the strings.
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
jQuery(function($){
let desktoptitles = $('.elementor-tab-desktop-title');
let mobiletitles = $('.elementor-tab-mobile-title');
let strings = ['?question1',
'?question2',
'?question3',
'?question4',
'?question5',
'?question6',
'?question7',
'?question8',
'?question9',
'?question10',
'?question11',
'?question12',
'?question13'
];
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); });
Thanks!
The code you have there isn't for EA advanced elements, but for Elementor tabs...
Get the code for EA advanced tabs right in the tutorial.
Cheers!
I am using this code for Elementor Premium addons tabs, and was able to get it functioning properly for desktop, but when I toggle the widget to accordion for mobile, it does not work, and the page just constantly reloads. Is there any fix for this?
Hey Dustin!
I'm not familiar with Premium addons tabs element. I don't really know why the page would reload like that.
Hi , I used Elementor Open Specific Tab to open the apecific tabs,but there is a question about I used Chinese Traditional title, It can't be open, Would you please to teach me how to uses chinese traditional tltle, thank you very much
The title itself can have chinese characters. In the URL, you will have to add latin characters, and have these in the code also, as described in the tutorial.
Hi, I'm using the unlimited- elements widget, is it working with this as well?
Sorry, it's not working for that element
Hello Maxime!
Again I am turning to you for some wisdom.
In Elementor I have "experiments" enabled so I am using the new containers along with the new Tabs widget. I have tried your code with this but unfortunately nothing happens. I guess they really built a new widget with different code. Do you happen to have any idea on how to adjust the code for this new widget?
Thanks a ton master!
Kind regards
Greetings John!
Change the lines
to
To make it compatible with the new tabs element!
Cheers!
Hi, will try it out very soon and report back. Looks really clean, such a simple modification if you know what you are doing! I missed this part "> .e-n-tab-title"
Thanks!
Tabs code works for me very well.
Great stuff, thank you.
Hello thanks a lot for youre solution!
Is it possible to also open an specific tab on page load like on my homepage if i land there, a specific tab for example tab2/heythere will be open by default. I did not manage to solve that by myself. 🙂
Hey Oli!
Yes that's easy, just place the content you want to show by default in the very first tab! It's always opened by default!
Cheers!
Hello thanks a lot for the reply!
Unfortunately im using the first tab as an placeholder for my title because of styling reasons I did find another way of putting an title in there. so my content ist actually placed in tab 2/3/4 is it possible to open tab 2 by default on page load and not tab 1?
Hey Oli!
Yes it is. Add this bit of code in the JavaScript, right before the line let strings = ...
The 1 represents the index of the tab you want opened. JavaScript indexes are 0-based, so 1 means tab title 2.
Cheers!
Thanks a lot for getting back!
Im using this code now, is there a mistake in it, bc its not working?
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
jQuery(function($){
let desktoptitles = $('.e-n-tabs-heading > .e-n-tab-title');
let mobiletitles = $('.e-n-tabs-content > .e-n-tab-title');
desktoptitles.eq(1).click();
mobiletitles.eq(1).click();
let strings = ['?Sortieren Nach:',
'?Tab #1',
'?Tab #2',
'?Tab #3'
];
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); });
Hey Oli!
Can't have spaces in the tabs strings... as you can't have spaces (not really) in a URL. Also avoid the # symbol...
Try:
let strings = ['?SortierenNach:',
'?Tab01',
'?Tab02',
'?Tab03'
];
otherwise the code looks just fine and would be expected to work.
Cheers!