# Developers

# Important Codes

# Horizontal Scroll Stop

```css
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
```

# 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:
    
    <div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary"><div class="@w-xl/main:top-9 sticky top-[calc(--spacing(9)+var(--header-height))]"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
    </div></div></div><div class="overflow-y-auto p-4" dir="ltr">`<span class="hljs-attribute">price2</span>`</div></div>
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:

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk-https%3A%2F%2Fwww.echollm."><div class="@w-xl/main:top-9 sticky top-[calc(--spacing(9)+var(--header-height))]"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">`https:<span class="hljs-regexp">//</span>www.echollm.io/<span class="hljs-comment">#price2</span>`</div></div>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)

```javascript
<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:
    
    <div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary"><div class="@w-xl/main:top-9 sticky top-[calc(--spacing(9)+var(--header-height))]"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
    </div></div></div><div class="overflow-y-auto p-4" dir="ltr">`https:<span class="hljs-regexp">//</span>www.echollm.io/<span class="hljs-comment">#price2</span>`</div></div>
4. Confirm:
    
    
    - Page scrolls to the Tabs section
    - “Chat Platforms” tab opens automatically
    - Content inside the tab is visible