Skip to content

Instantly share code, notes, and snippets.

@AmmarCodes

AmmarCodes/README.md

Last active March 10, 2026 06:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AmmarCodes/a85211e3a5b8dd16029b261c7e46c7f1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AmmarCodes/a85211e3a5b8dd16029b261c7e46c7f1 to your computer and use it in GitHub Desktop.
Download ZIP
WordPress: link to specific elementor tab on a specific page
Raw
README.md

It's a quick ad-hoc solution to allow you to link to your page to a specific tab from elementor tabs widget.

Here's the catch, you need to replace the id of the specific tab you want to use to not contain the title- part.

Use https://your-website/#elementor-tab-1515

instead of: https://your-website/#elementor-tab-title-1515

Make sure you add the JavaScript code in the footer, so it loads after the elementor tabs widget, otherwise the elementor tabs widget code will override what we're trying to acheive.

@Artem66
Copy link

Artem66 commented Feb 6, 2024 •
edited
Loading

@zodieman You can try to remove setTimeout and run the script after the DOM is fully loaded.

jQuery(document).ready(function($) {
    var suf = '';

    var setupTabs = function() {
        var current = window.location.href;
        suf = current.slice(-4, -1);
        var current = current.split(`#elementor-tab-title-${suf}`);
        if (current.length > 1) {
            $('.elementor-tab-title').removeClass('elementor-active');
            $('.elementor-tab-title[data-tab="'+current[1]+'"]').addClass('elementor-active');
            $('.elementor-tab-content').hide();
            $('.elementor-tab-content[data-tab="'+current[1]+'"]').show();
        }
    };

    $(window).on('load', function() {
        setupTabs();
    });

    $('.elementor-tab-title[data-tab]').click(function(){
        var current_location = window.location.href;
        current_location = current_location.split(`#${suf}`);
        window.location = current_location[0]+'#elementor-tab-title'+$(this).attr('data-tab');
    });
});

@kengarshridhar
Copy link

kengarshridhar commented Mar 10, 2026

Here I Provided the Optimized solution.

If the tab ID matches the hash, this version works for unlimited tabs

example:

<a href="/page-name/#architectural">Another Page Tab </a>

<script>
jQuery(window).on('load', function () {
    setTimeout(function () {
        let hash = window.location.hash;
        if(hash){
            jQuery(hash).trigger('click');
        }
    },200);
});
<script>

will automatically open the correct Elementor tab.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment