Custom CSS ID link to Elementor Nested Tabs

If you want to create URLs to take your visitors to a particular tab with Elementor’s nested tabs, as of this writing it doesn’t work (April 23, 2024).

Here’s how to make it work.

Paste this code in the HTML widget and place it right before your tabs widget.
Then, add your CSS ID to your tabs.

Your final URL to arrive on a tab will be https://yourwebsite.com/?tab=cssid

				
					<script type="litespeed/javascript">window.onload=function(){const urlParams=new URLSearchParams(window.location.search);const openTabId=urlParams.get('tab');if(openTabId){const targetTabButton=document.getElementById(openTabId);if(targetTabButton&&targetTabButton.classList.contains('e-n-tab-title')){targetTabButton.click()}}}</script>

Want to leave a comment ?

2 Responses

Ry says:
24 April 2024 at 10h43
Hello. The code works very well. I also added like a placeholder to scroll to the tab, with the function: .scrollIntoView(), right after the .click() function. Everything works excellent. Thank you.
Reply
Tiago Cunha says:
12 May 2024 at 17h35
Didn’t work for me. Probably in
Doing it wrong. When clicking in a link (button) the pages refresh’s and doesn’t go smoothly to the tab. Can you send me a code where this o cuts smoothly and not refreshing the page? Thanks ????
Reply