ID de CSS personnalisé pour Elementor nested tabs

Si vous souhaitez créer des URL pour diriger vos visiteurs vers un onglet particulier avec les onglets imbriqués d’Elementor, au moment d’écrire ces lignes, cela ne fonctionne pas (23 avril 2024).

Voici comment le faire fonctionner.

Collez ce code dans Elementor dans Code personnalisé.
Ensuite, ajoutez votre identifiant CSS à vos onglets.

Votre URL finale pour arriver sur un onglet sera https://yourwebsite.com/votre-page#onglet

				
					<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>

Envie de laisser un commentaire ?