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 Elementor in the Custom Code options.
Then, add your CSS ID to your tabs.

Your final URL to arrive on a tab will be https://yourwebsite.com/page#tab

				
					<script>
// Solution simplifiée utilisant les IDs natifs d'Elementor
(function($) {
    'use strict';
    
    $(window).on('elementor/frontend/init', function() {
        
        // Fonction pour activer un onglet par son ID
        function activateTabById(tabId) {
            const $targetTab = $('.e-n-tab-title#' + tabId);
            
            if ($targetTab.length) {
                // Vérifier si l'onglet n'est pas déjà actif
                if (!$targetTab.attr('aria-selected') || $targetTab.attr('aria-selected') === 'false') {
                    $targetTab.trigger('click');
                }
                
                // Scroll vers l'onglet
                setTimeout(function() {
                    const $container = $targetTab.closest('.elementor-widget-n-tabs');
                    if ($container.length) {
                        $('html, body').animate({
                            scrollTop: $container.offset().top - 100
                        }, 300);
                    }
                }, 200);
                
                return true;
            }
            return false;
        }
        
        // Activer un onglet depuis l'URL au chargement
        function activateFromHash() {
            const hash = window.location.hash;
            if (hash) {
                const tabId = hash.substring(1);
                activateTabById(tabId);
            }
        }
        
        // Mettre à jour l'URL quand on clique sur un onglet
        function initTabClicks() {
            $('.e-n-tab-title').off('click.taburl').on('click.taburl', function() {
                const tabId = $(this).attr('id');
                if (tabId && !tabId.startsWith('e-n-tab-title-')) {
                    // Ne mettre à jour l'URL que si l'ID est personnalisé (pas auto-généré)
                    history.pushState(null, null, '#' + tabId);
                } else if (tabId) {
                    // Pour les IDs auto-générés, on peut aussi les utiliser
                    history.pushState(null, null, '#' + tabId);
                }
            });
        }
        
        // Initialiser
        setTimeout(function() {
            initTabClicks();
            activateFromHash();
        }, 500);
        
        // Gérer les changements d'URL (bouton retour du navigateur)
        $(window).on('hashchange', activateFromHash);
        
        // Réinitialiser quand Elementor recharge des widgets
        elementorFrontend.hooks.addAction('frontend/element_ready/n-tabs.default', function($scope) {
            setTimeout(function() {
                initTabClicks();
            }, 100);
        });
    });
    
    // Fallback si elementor/frontend/init ne se déclenche pas
    $(document).ready(function() {
        setTimeout(function() {
            if ($('.e-n-tab-title').length > 0) {
                $(window).trigger('elementor/frontend/init');
            }
        }, 1500);
    });
    
})(jQuery);
	</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?

Free shipping method with WooCommerce coupon

Offer free shipping… but only for the shipping method you choose.

WooCommerce Product Buyers List

Added a tab in WooCommerce to display buyers of a specific product with date filter.

Additional Emails per Products for WooCommerce

Adds a custom tab in WooCommerce products to write an email specific to each product. This will be sent in a dedicated email.

Create a custom gallery with Elementor

With this code we gonna add a custom gallery to an elementor page

Display the total weight in the cart and order page of woocommerce

This code will allow you to know the weight of the order in the cart and order pages of woocommerce.

Custom CSS ID link to Elementor Nested Tabs

This script will allow us to run an URL directly to an Elementor tab
Let's talk ?

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