The popular WordPress page builder plugin Elementor recently released a new widget called Nested Tabs. The Nested Tabs widget allows for far greater customization and flexibility with the content. It Replaces the old Tabs widget if you have containers enabled.

The old Tabs widget supports anchor links (links that end with #anchor-link-here), allowing you to easily link to a specific tab on the page. Unfortunately, the new Nested Tabs widget no longer supports anchor links, which may be an issue if you want to convert existing Tabs widgets to Nested Tabs, or if your site uses anchor links often.

Adding the code below will restore anchor links support, as well as changing the url in the address bar automatically when a tab is clicked.

Code to Restore Anchor Links in Elementor’s Nested Tabs Widget

The required code is in javascript, however for simplicities sake, we will add it to the wp_footer hook. The following can be added to functions.php or any other relevant location where you can add PHP code:

<?php

...

/** Restore anchor link function for the new Elementor Nested Tabs **/
add_action('wp_footer', function () {
?>
  <script>
    // Fire when the page is done loading
    window.addEventListener("load", () => {

      // Exit if there are no nested tabs on the page
      if (document.querySelectorAll(".elementor-widget-n-tabs button.e-n-tab-title").length == 0 || !window.location.hash) return;

      jQuery(".elementor-widget-n-tabs button.e-n-tab-title").on("click", function(e) {

        // Exit if there is no id on the button
        if (!jQuery(this).attr('id')) return;

        // Set the url hash
        window.location.hash = '#' + jQuery(this).attr('id');
      })

      // Trigger tab change to the button with our hash
      jQuery(".elementor-widget-n-tabs button.e-n-tab-title" + window.location.hash).trigger('click');
    });
  </script>
<?php
});

...

Once the code is added, you can use the existing CSS ID field in Elementor to set your desired ID:

and that’s it! Anchor links should now work.

Elementor may add support for anchor links in the future, but for the time being, this can be used to get it working.

Related posts: