How to Make Elementor Tab Titles Clickable

Added by Ebrahim Jabbari
June 15, 2023

I am assigned to a task where I need to make the Elementor tab work on hover while keeping the tab title clickable to a specific destination. Although this request came from the client, I believe that from a UX standpoint, combining two functions into one element may not be considered a best practice and may not return the client’s expected result.

In Elementor, the Tab widget doesn’t have a built-in option to make the tab title clickable and open a new page directly. However, you can achieve this functionality by adding custom JavaScript code to your page. Here’s a step-by-step guide on how you can implement it:

Step 1:

Add a unique CSS class or ID to the Tab widget, for example, “clickable-tabs“.

Step 2:

Add <a> tag manually in the title field as below:

Note: Simply adding an <a> tag here won’t make the title clickable, so this is where the tricky part begins.

Step 3:

Add the following JavaScript code:

				
					<script>
    jQuery(document).ready(function($) {
        
  $('.clickable-tabs .elementor-tab-title a').click(function(e) {
    e.preventDefault();

    var url = $(this).attr('href');

    window.location.href = url;
  });
});
</script>

By using JavaScript and jQuery, you can add a click event handler to the tab titles and open the specified URLs.

Demo

Click on the image below to view the demo that I implemented on the MIS Solution website.

Happy Developing! ✌️