Streaming live at 10am (PST)

[CMS] Conditional element visibility?


Hi there!

First of all - Webflow CMS is great! We are considering using it as our go-to small site platform.
Most of the functionality makes complete sense, and is very intuitive to use, but what i was unable to find so far is an option to hide certain bits of content depending on the value of a field in a data collection entry.

Example: Lets say we have a list of authors and for each of them we can fill out a twitter profile url. I would like to only display a twitter link + icon IF that field is not empty.

Seems like a pretty basic thing to have in a CMS.
Your thoughts? Maybe that functionality is present already and im just missing something here..

  • Peter


Great question. Just make sure the field isn't set to "required" in the collection. That way it won't show up if the field is left blank. smile


@PixelGeek I think you misunderstood me smile

What you describe would be just fine for printing out text, or an image (here im not actually sure, because Webflow seems to be rendering a dummy image if an image is missing). Im my case tho...

The field that would be left empty is just the URL, and it would end up here:

<a href="{{ twitterUrl }}"><img src="/images/path/twitter-icon.svg" /></a>

As you can see, the point is to have an icon linking to the authors twitter page. Now i would like to wrap the whole <a> tag in an IF statement, rendering that piece of code only if the URL is not empty. A TWIG equivalent would be:

{% if twitterUrl %}
  <a href="{{ twitterUrl }}"><img src="/images/path/twitter-icon.svg" /></a>
{% endif %}
  • Peter


I second @peter_redrabbits question, as I've been wondering about this myself.


Hi @peter_redrabbits and @abeyang, there is workaround that other user on the forum found out - to use "empty" state.
Hide empty elements from content collection:

Just few lines of code that you can put in the "head " part (choose which one fit your needs):

a:empty { display: none; }


a[href=''] { display: none; }


a[href='#'] { display: none; }


a:not([href]) { display: none; }

Same thing works with div.

Good luck,


We're already designing a visual solution for this. Thanks for the feedback!


Ya, this is a problem I am having. I am having to create multiple Collections instead of using basic logic and the 'Switch' field in a single collection.

For eg. One of my content pieces can either be a Story or a Research paper, with mostly common content fields and couple of conditional ones. I can't seem to be able to filter display of elements according if the state of a switch like 'Is this a Research paper?'. If true, I want it to display one set of content and if not display another set.

Unfortunately, even if I ask content managers to leave non-applicable field empty, there is no easy way to toggle visibility of an element.


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.