Elementor Nested Tabs – Open specific tab using URL hash.

Readme.md

This script enables direct linking to Elementor Nested Tabs using URL fragments such as:

/page/#architectural /page/#composite

When the page loads, the script reads window.location.hash and automatically triggers the corresponding Elementor tab button using its ID. This approach relies on Elementor's native click event, ensuring proper activation of tab states (aria-selected, tabindex, and active classes) without manually modifying DOM attributes.

Features:

• Works with Elementor Nested Tabs widget
• Supports direct linking and page redirects
• Lightweight jQuery implementation
• Compatible with Elementor updates (no hard-coded class manipulation)
• Automatically activates tabs when visiting URLs with a hash

Usage:

1. Ensure each Elementor tab button has a unique ID.
2. Add the script via Elementor Custom Code, HTML widget, or theme JS file.
3. Link to tabs using the URL hash matching the tab button ID.

Example:

<a href="/page/#architectural">Architectural Tab</a>
<a href="/page/#composite">Composite Tab</a>

elementor-hash-tabs.js

<script>
jQuery(window).on('load', function () {

    setTimeout(function () {

        let hash = window.location.hash;

        if(hash){
            jQuery(hash).trigger('click');
        }

    },200);

});
</script>