Streaming live at 10am (PST)

CMS - hide element if value is null


#1

I've created a collection with items that potentially have 1 - 4 links. I'm displaying these as buttons:

However, I don't want to display a button if the link value is null. In this case, attribute 4 is null, but Webflow still displays a Other button.

Is there a way to tell Webflow not to display a button link for an attribute who's source is null?

Thanks!


Hide empty elements from content collection
#2

Can you post a read-only link please?

Thank you,

Waldo smile


#3

Sure: https://preview.webflow.com/preview/testblank-943b2c?preview=96bdb15a660f49794e13b68c7c8da854

I thought creating Switches for each item might help, but those seem to apply to a post globally instead of the individual elements.

The last sample post has all of the Link attributes filled in. The first and second have one or more missing.


#4

Thanks for the feedback! We're trying to figure out a solution for this.


#5

Much appreciate your quick response. This is the only thing, aside from a way to import/export content, that's holding me back from signing on.

Might be as simple as adding a "Visible If Null?" switch to a class that draws data from a field. I'll leave it to the experts to work out a slick solution.

Best regards!


#6

Any luck on this??? I am running into the same issue. In my case, I am trying to build a collection page that will show items only if there is a value associated with it in the CMS. The show/hide per element is essential!


#7

Just was working on this and found a solution that will work if you have a specific class that you want to hide when it's empty.

<script>

$('.yourclassnamehere').each(function(){  
if($.trim($(this).html()).length == 0){
 $(this).hide();
}
})

</script>

Can't take the credit for it, as I had a developer help me, but it should work for you. Remember to replace '.yourclassnamehere' with your class... just in case you miss that part.

Not sure about the legacy browser support of this, but i'll do some more testing.


#8

Oh, and here's another solution we found that was specifically made for links, that works with ids instead of classes. It might be more what @zolointo is looking for.

<script>
  if($('#youridhere').prop('href').length <1){$('#youridhere').hide()}
</script>

#9

Update - This has been implemented in the latest New Feature: Conditional Visibility

NICE!


#10

#11