Elementor Tabs Dynamic Visibility – Hide Tab if empty

Elementor Tabs Dynamic Visibility can be amazing when you want to hide a tab that is empty. This tutorial by Wicky Design will show you how to archive this by using a few lines of JavaScript. The approach we’re taking is straightforward and doesn’t require any additional plugins or extensive coding knowledge. This technique is particularly useful if you want to display content conditionally, based on whether a user has provided certain information. For example, you might have a tab that only displays if a user has entered a video link.

Elementor Tabs Dynamic Visibility Steps

1. Set Up Your Page in Elementor
   Start by navigating to the page where you want to implement this feature. We’ll be focusing on a specific section where you want to dynamically show or hide a tab.
2. Add Your Tab Widget
   In this tutorial, we’re using the regular tab widget in Elementor. You can give your tab a title, in this case, we’re using “Video”.
   
3. Use a Shortcode for Your Template
   Inside your new tab, use a shortcode for your template. This will make the process easier. In this case, we’re using a template that pulls in an ACF field.
   
4. Connect Your ACF Field
   In your template, you’ll need to connect an ACF field. In this tutorial, we’re using a field called “video tab”.
   
5. Assign a Unique CSS ID to Your ACF Widget
   This is a crucial step. Under the Advanced settings of your ACF widget, assign a unique CSS ID. In this tutorial, we’re using “ACF video”. This ID will be used in the JavaScript code.
   
6. Add Your JavaScript Code
   Above your tab widget in Elementor, add an HTML widget and paste the JavaScript code provided below. You’ll need to replace two parts of the code: the unique ID you assigned to your ACF field and the unique ID for your tab.

   <script>
     (function($) {
       $(document).ready(function() {
         if (!$('#acfvideo').length) {
           $('div[aria-controls="elementor-tab-content-5374"]').hide();
         }
       });
     })(jQuery);
   </script>

   Source: Wicky Design

7. Find Your Tab’s Unique ID
   To find your tab’s unique ID, inspect the code on the front end of your website. Look for the “Aria controls” in the code and find the number following the “Elementor tab content”. This is your tab’s unique ID.
   
8. Test Your Setup
   Now that everything is set up, it’s time to test it out. If you’ve followed the steps correctly, your tab should now hide if the ACF field is empty, and show if it contains content.

Where Elementor Tabs Dynamic Visibility Might be Useful

The ability to dynamically show or hide content based on user input is a powerful tool for any web designer. It allows you to create more interactive, engaging websites that respond to your users’ needs. This can lead to a better user experience, increased engagement, and potentially higher conversion rates.

Moreover, this technique can be used in a variety of contexts, not just for hiding and showing tabs. With a bit of creativity, you can apply this method to different elements on your website, further enhancing its dynamism and interactivity.

Finally, this tutorial demonstrates how you can achieve complex functionality with just a few lines of JavaScript. This is a great way to improve your coding skills and learn more about how JavaScript can be used to enhance your web design projects.

Compatibility with other Custom Post Type Plugins

While this tutorial focuses on using Advanced Custom Fields (ACF), it’s important to note that the technique of dynamically showing or hiding tabs in Elementor is not limited to ACF. It can also be applied to custom post type (CPT) plugins like JetEngine and Pods. So, whether you’re using ACF, JetEngine, Pods, or any other custom field or CPT plugin, you can take advantage of this method to enhance the dynamism and interactivity of your WordPress website.

Common Issues

1. Tab Not Hiding or Showing
   Make sure you’ve correctly replaced the unique IDs in the JavaScript code. The ID for the ACF field should match the one you assigned in Elementor, and the tab ID should match the one found in the “Aria controls” in the code.
2. JavaScript Code Not Working
   Ensure that you’ve placed the JavaScript code in an HTML widget above your tab widget in Elementor. If the code is placed elsewhere, it may not work as expected.
3. ACF Field Not Displaying Content
   Check that you’ve correctly set up your ACF field and that it’s pulling in the right data. Also, ensure that you’ve entered the correct field name in your template.