Deep Linking to Elementor Nested Tabs Using URL Hash ( automatically open tab when button click )

Purpose

This SOP explains how to create custom links (buttons, menu items, or external URLs) that automatically scroll to and open a specific Elementor Nested Tab (e.g., “Chat Platforms”) when a page loads.

Step 1: Assign a Unique CSS ID to the Tab

1. Open the page in Elementor Editor

2. Click the Nested Tabs widget

3. Select the tab you want to deep-link (example: “Chat Platforms”)

4. Set CSS ID to:

   
   

   price2

5. Update the page

⚠️ Ensure this ID is unique and not used elsewhere on the page.

Step 2: Create the Deep Link URL

Use this format:

This link can be used in:

• Elementor Button widget

• WordPress Menu

• External marketing links

• Emails

Step 3: Add JavaScript Using Elementor Custom Code

Why this is required

Elementor Nested Tabs load after the page DOM.
Custom Code runs after Elementor frontend initialization, ensuring the tab can be activated correctly.

How to Add Custom Code

1. Go to WordPress Dashboard

2. Navigate to Elementor → Custom Code

3. Click Add New

4. Enter:

   • Name: Nested Tabs Deep Linking

   • Location: Body End

5. Set Display Conditions:

   • Entire Site OR

   • Specific Page (recommended)

<script>
(function () {

    function openNestedTab() {
        if (!window.location.hash) return;

        const id = window.location.hash.substring(1);
        const tab = document.getElementById(id);
        if (!tab || !tab.classList.contains('e-n-tab-title')) return;

        const tabs = tab.closest('.e-n-tabs');
        if (!tabs) return;

        const index = tab.dataset.tabIndex;

        tabs.querySelectorAll('.e-n-tab-title').forEach(b => {
            b.setAttribute('aria-selected', 'false');
            b.classList.remove('e-active');
            b.tabIndex = -1;
        });

        tabs.querySelectorAll('[role="tabpanel"]').forEach(p => {
            p.classList.remove('e-active');
            p.hidden = true;
        });

        tab.setAttribute('aria-selected', 'true');
        tab.classList.add('e-active');
        tab.tabIndex = 0;

        const panel = tabs.querySelector(
            `[role="tabpanel"][data-tab-index="${index}"]`
        );

        if (panel) {
            panel.hidden = false;
            panel.classList.add('e-active');
        }

        tabs.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    window.addEventListener('load', () => {
        setTimeout(openNestedTab, 800);
    });

})();
</script>

Step 4: Testing Procedure

1. Clear site cache (important)

2. Open an incognito/private browser

3. Visit:

   
   

   https://www.echollm.io/#price2

4. Confirm:

   • Page scrolls to the Tabs section

   • “Chat Platforms” tab opens automatically

   • Content inside the tab is visible