Display template content conditionally

[andre9000]

This is probably an easy one, but I can not figure it out how to hide an element if it has no value:

<h1>{% text "h1" label='Enter H1', value='This is the H1' %}</h1>  

<style>
{% if "h1" is none or "h1" == "" %}
  h1 {
    display: none;
  }  
{% endif %}
</style>

This doesn't work, H1 never gets "display: none;". 

If I try 

{% if h1 is none or h1 == "" %}

instead (no "" around the name), it will hide H1 even if it has a value.

[tjoyce · Accepted solution]

@Hello @andre9000 - Your HUBL tags are going to be in a dictionary, so you would inspect the data cominng from your tag by accessing "widget_data". You should combine this with the "export_to_template_context" tag attribute as well.

Shorthand:

{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{{'<h1>'+widget_data.h1.value+'</h1>' if widget_data.h1.value != ""}}

Or, longhand:

{% text "h1" label="Enter H1" value="This is the H1" export_to_template_context="true" %}
{% if widget_data.h1.value != '' %}
  <h1>{{widget_data.h1.value}}</h1>
{% endif %}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[andre9000]

Awesome, works perfectly. Thank you, good to know!

[andre9000]

a nicer approach of course would be no wrap the element itself in a condition, so it doesn't get into the markup if it's empty. However, this doesn't seem to work, because then it is not possible to set a value for h1 anymore.