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.
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)
Click the dynamic cylinder icon and choose "Shortcode".
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.
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!
15 Responses
Worked great and it is super useful! Thanks a lot!
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!
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!
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!
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!
I understand, thanks again!
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?
Hey Singh!
In the CSS part of the code, instead of
display: none;
use
visibility: hidden;
Cheers!
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
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.
Hey Lukas!
Yes I published this tutorial just before they released that feature. Now, it's better to use the Display Conditions from Elementor Pro.
I have a tutorial here too on how to improve them: https://element.how/elementor-display-conditions-show-all-custom-fields-and-add-search-function/
Cheers!
Hi Max, i followed the tutorial and it doesnt hide the icon even if i do exactly as in the tutorial:
Custom slug:
https://snipboard.io/vwOmZW.jpg
Icon widget:
https://snipboard.io/y7uc3b.jpg
it still displays the icon even if there is no value in the link
Thanks
Greetings!
Sorry, you should now be using Elementor's own display conditions to show or hide an element.
https://elementor.com/help/show-and-hide-elements-on-a-page-display-conditions/
The current tutorial is now exclusively about showing or hiding a tabs or accordion item.
Cheers!
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?
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!