Conditional visibility in Webflow and Tangram
In order to conditionally hide everything inside of a div block based on the value a custom field is currently set to, follow these steps:
1) Wrap the thing you want to conditionally hide in a div block. It is our best practice to add a class to this div block like "Hide Class".
2) Wrap the Hide Class div block in another div block set to "display: block". Name it something like "Safety Wrapper".
3) Apply the HTML attributes to the Hide Class div block:
If you want to hide everything inside the div block unless a certain field is set to ANYTHING, add the following:
tg-hide-unless-field = "[field_id]"
tg-hide-unless-value = "*"
If you want to hide everything inside the div block unless a certain field is set to NOTHING, add the following:
tg-hide-unless-field = "[field_id]"
tg-hide-unless-value = "null"
If you want to hide everything inside the div block unless a certain field is set to a specific value, add the following:
tg-hide-unless-field = "[field_id]"
tg-hide-unless-value = "[specific value]" e.g. "purple"
Get notified of new features & resources.
Subscribe to our newsletter and stay up-to-date on our roadmap, new features, and free resources to help you scale your marketplace.
%2020.39.51%201%20(1).png)
%2020.39.51%202%20(2).png)
%2020.39.51%204%20(2).png)
%2020.39.51%203%20(1).png)
%2020.39.51%201%20(1).png)
%2020.39.51%202%20(2).png)
%2020.39.51%204%20(2).png)
%2020.39.51%203%20(1).png)
%2020.39.51%201%20(1).png)
%2020.39.51%202%20(2).png)
%2020.39.51%204%20(2).png)
%2020.39.51%203%20(1).png)
%2020.39.51%201%20(1).png)
%2020.39.51%202%20(2).png)
%2020.39.51%204%20(2).png)
%2020.39.51%203%20(1).png)
.png)