Elementor Hide Tabs or Accordion if Custom Field is Empty
Get Premium

Elementor Hide Tabs or Accordion if Custom Field is Empty

Element.How also offers premium tutorials! Check them here:

Elementor Hide Tabs or Accordion if Custom Field is Empty

Table of Contents

This tutorial used to be about showing or hiding elements conditionally based on if a custom field is empty or not, however Elementor now has it's own display conditions which should be used for that.

The current tutorial is now to show or hide an Elementor Accordion or Tabs that has dynamic data, when a specific custom field is empty. Not the whole element, but a single accordion item, or tabs title.

This Elementor Hide if Empty method uses CSS, so the element might still show up in the source code, but it will be set to display:none.

The advantage of this method is that it requires no extra plugin, just Elementor Pro.

Another advantage is that it works with all custom fields providers: ACF, JetEngine, Pods, Metabox, etc.

Let's get started!

First, let's add this code in a new Code Snippet

Use the plugin of your choice, or your child theme's functions.php. This is a PHP code snippet so you can't add it in Elementor Custom Code.

Here we will be using the Code Snippets plugin.

Elementor Hide Tabs or Accordion if Custom Field is Empty 1

Now, create a new code snippet and copy paste this code in it:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Hide Tabs or Accordion if Custom Field is Empty tutorial 
 * Found at this URL https://element.how/elementor-hide-if-empty/ 
 */ 
</script>

Then Save the code snippet and Activate it.

Now, go on the Elementor pages where you want to hide a tabs title or accordion item if the field is empty

Go on the pages or single post templates where you have elements to hide if the field is empty.

Go on the element itself, under Accordion item > CSS ID. (or the equivalent for the tabs element)

Elementor Hide Tabs or Accordion if Custom Field is Empty 2

 

Click the dynamic cylinder icon and choose "Shortcode".

 

Elementor Hide Tabs or Accordion if Custom Field is Empty 3

Then copy paste this:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Hide Tabs or Accordion if Custom Field is Empty tutorial 
 * Found at this URL https://element.how/elementor-hide-if-empty/ 
 */ 
</script>

Be certain to replace YOUR_CUSTOM_FIELD_SLUG with the actual slug of the field you want to check against.

Elementor Hide Tabs or Accordion if Custom Field is Empty 4

You should be able to find this slug easily in the custom field's settings. I don't show a screenshot here as it will vary from ACF to JetEngine to others.

Set this CSS ID for each tab or accordion title that needs it (i.e. that you want to dynamically show up depending on if a custom field is populated or not).

Finally, enjoy your Elementor Accordion items and Tabs titles hide if empty!

I hope you have enjoyed this tutorial!

Cheers!

Elementor Hide Tabs or Accordion if Custom Field is Empty

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

16 Responses

  2. This worked great for widgets and containers but currently not working for nested tabs, since I can only add CSS IDs to each tab and not CSS classes (still tried and did not work). Any workaraound around this?

    And thank you so much, your tutorials are great!

    1. Greetings Laura!

      Try this:

      Set the class as normal, on the element itself, as instructed in the tutorial.

      Then, change the CSS from this:

      .custom-field-is-empty.custom-field-is-empty.custom-field-is-empty {
      display: none;
      }

      to something like this:

      .custom-field-is-empty #your-tab-id {
      display: none;
      }

      Let me know if that works for you!

      Cheers!

      1. YESSSSSS 🤩🤩 That worked great, thank you so much!! Is it possible to apply it to several tabs? Since the shortcode targets just one field and I have at least three I need to hide when empty. Do I just add the other field slugs to the shortcode?

        Thanks again, you've been very helpful!

    2. Glad it's working!

      If what you need is to hide more tabs, based on if the same custom field is empty, then try this:

      .custom-field-is-empty #your-tab-id,
      .custom-field-is-empty #your-tab-id2,
      .custom-field-is-empty #your-tab-id3 {
      display: none;
      }

      If what you need is to hide multiple tabs, based on multiple custom fields, if each is empty... it's more complex. A bit beyond the intended scope of the tutorial, sorry.

      I hope this helps!

      Cheers!

  3. It works great, I have a question. I'm trying to hide a button if there's no link. it works great. but the container spacing gets weird. is there a way that the space button takes stay there? even if the button is hidden?

  4. Hey Maxime!

    Thanks for that, it works great! However, for some reason for me adding a separate class under advanced is not working. I tried several times in different versions (including adding a space), but it wouldn't get added. Is there something particular I might need to pay attention when I use a loop grid?
    So, I have a template with an icon-list, which I use to place a link. The link text as well as the URL are dynamic with an ACF field. It should be hidden when there's no link. The additional class I need to add a certain hover effect to the link. Any idea what could be wrong?

    Cheers,
    Lukas

    1. I already found a way myself. It can be done with the new feature of elementor where you can add specific display conditions for each element. It supports dynamic tags, too.

  6. Hello, what about where the first 'tab' is normally 'open' by default, but when the first tab is hidden - I'm finding no tab is selected by default, where ideally the next tab that is not hidden should be selected. Is there a solution for this?

    1. Greetings Monique,

      Yes I understand... it adds significant complexity though.

      I would recommend trying to fix this problem by having the first tab always opened and relevant, and conditional content in the other tabs only.

      Cheers!

  7. Hi Max! This would work with Wordpress native custom fields inside posts?
    I have a post template on Elementor with an icon list, so when there's no information to display on a particular Custom Field that particular content related to that icon should not be visible.

    Thanks!

Leave a Reply