June 14, 2023

Elementor Tabs Dynamic Visibility – Hide Tab if empty

Play Video

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”.
    Add Your Tab Widget
  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.
    Use a Shortcode for Your Template
  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”.
    Connect Your ACF Field
  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.
    Assign a Unique CSS ID to Your ACF Widget
  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.

      (function($) {
        $(document).ready(function() {
          if (!$('#acfvideo').length) {

    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.
    Find 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.

Required Resources

Elementor Logo
Free Options
Credit to Wicky Design
Immerse yourself in the world of web design with Barbara and Mark, a talented husband and wife duo based in Philadelphia, PA. Their channel focuses on everything from web design and Elementor to WordPress and growing an online business. With their unique blend of experience and expertise, they offer invaluable tips, tutorials, and insights for both beginners and experts.
Elementor Tabs Dynamic Visibility – Hide Tab if empty
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.