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'); // 'tab' is the parameter in the URL

    if (openTabId) {
        const targetTabButton = document.getElementById(openTabId);
        if (targetTabButton && targetTabButton.classList.contains('e-n-tab-title')) {
            targetTabButton.click(); // Simulates a tab button 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