Elementor Open Tab with Link – How to Link to Specific Tabs or Toggles

Want to use the Elementor open tab with link feature?
This guide will show you how to open a specific tab, toggle, or accordion when someone clicks a link.

Let’s go step by step.

Step 1: Add an HTML Widget

Drop an HTML widget anywhere on the page.

Paste this code inside it:

<script>
jQuery(document).ready(function($) {
  function updateURLParameter(param) {
    var url = new URL(window.location.href);
    url.searchParams.set('tab', param);
    history.pushState({}, '', url);
  }

  function triggerActiveTabFromURL() {
    var urlParams = new URLSearchParams(window.location.search);
    var activeTabID = urlParams.get('tab');
    if (activeTabID && $('#' + activeTabID).length) {
      setTimeout(function() {
          $('#' + activeTabID).click();
      }, 500);
    }
  }

  $('.e-n-tab-title').on('click', function(e) {
    e.preventDefault();
    var tabID = $(this).attr('id');
    updateURLParameter(tabID);
  });

  triggerActiveTabFromURL();
});
</script>

Step 2: Add IDs to Your Tabs or Toggles

If you’re using the new Elementor Tabs or Accordion, there’s a field for adding an ID next to each title.
Add your custom ID there (use lowercase and no spaces).

If you’re using older versions, you’ll need to inspect and manually set IDs inside each tab title element.
Make sure each ID is unique.

Step 3: Create the Link

Now create your link like this:

yourwebsite.com/?tab=your-tab-id

Change your-tab-id to match the ID you added earlier.

This link can be used on any button, menu, or anchor.

Done!

Now when someone clicks the link:

• The tab or accordion will open
• Page will scroll to it
• The link will even work from another page

Simple and super useful.