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

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

  2. 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 ????

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to see more code snippets?
Let's talk ?

A question about WordPress?
A web project to be outsourced to a freelancer?
I am your man!