Conditional visibility: only for CMS?

Design help General
1

Hello,

I’m wondering if the “Conditional visibility” feature works only for CMS collection?

In my understanding, on a regular page I should be able to create a component with some properties and add a conditional visibility to on of it’s element, but the list remains empty:

Conditional visibility box:
image

Component properties:
image

Am I doing something wrong?

2

Hi Amaury!

You should be able to select ‘Create & connect new property’, select the component and switch between Visible and Hidden. Let me know if i’m missing something!

image
image2510×501 91.8 KB

image
image2529×464 80.9 KB

3

Hello,

Thanks for your answer.
My use case would be to define the conditional visibility depending on another property.

My markup looks like this:

<div class="foo">
  <img class="bar" src="{{image}}" />
</div>

So it would be:

Hide .foo if the property {{image}} has not been filled / set.

As you said, I can add a visibility toggle to .foo, but it wouldn’t be “conditional” or automatic.
Or am I missing something?

Doest that make sense?

4

@Amaury
You can do this with CSS.

<style>
.foo:has(img.bar[src=""]){
  display:none;
} 
</style>
1 Like