Visibility conditions

Hi there,

I’m wanting to know if it’s possible to hide a container based on a collection item dynamic content. I know you can display content based on certain criteria being reached but what about hiding.

The example is a coupon box field where the expiry date is set as a field in the collection item -

So when the coupon hits that expiry date the whole coupon code box container I have designed is hidden automatically.

Is that possible with Webflow?

Hey hey,

I’m almost certain that this is natively possible.
Add a date field to your collection and in the reference on a page have a look at the filter conditions

Thank you,

You pointed me in the right direction as the design element was not part of a collection list which is why I wasn’t seeing the date filter - however, this has raised another issue where the whole coupon box disappears when no date is set in the date custom field.

So that doesn’t work because not all coupons need an expiry date set and we need these to be always displayed on our site. Might have to talk Webflow about i

I see…
Couldn’t you separate the expiring ones into their own collection?

hi @therondp I have shared here on forum solution for this in past so here is link again. In this example Im changing only to expired so to hide element you just need to add condition to display:none when coupon is expired. To keep other coupons to be displayed all the time you will leave date empty and add one condition if date === undefined or null. In example I have set comming soon

Feel free to copy and customise provided JS. The example you are looking for is on Home page .

Here is Live page just in case you would like to use Dev tools to look into page whas is in DOM.

1 Like

Thanks for that script - it looks like it will do what I need! However I’m not a developer, so will have to ask one to define the custom variables that are relevant for my collection list.

But thanks again for pointing me in right direction.

Very neat! Thanks for sharing!