How do I add Conditional Rendering to a Dropdown element?

I’m having a difficulty that’s preventing me from progressing on my Weweb project.

I need to create a dropdown within an image element, so I added a Dropdown element aligned with an image element.

I need the element to load invisible when the page loads, and when I click on the image element, the dropdown becomes visible, and when I click again, it becomes invisible.

To achieve this, I decided to use the advanced Conditional Rendering configuration available in the Settings tab of elements.

Initially, I created a variable that I named ‘dropuserisOpen’ Type: Boolean, with the Default value: False.

Then, I created a workflow linked to the image element On click, and then I added the action: Change variable value, linked to Variable: dropuserisOpen, and its Value: True.

In the Settings tab for the Dropdown element in the advanced Conditional Rendering configuration, I defined the Condition in the Formula option: I linked the variable dropuserisOpen, and in Current value: the value false. This way, the Dropdown element initially becomes invisible when the page is loaded.

When I click on the image element, the Dropdown element becomes visible, but when I click again, the Dropdown element does not become invisible.

Why is the Dropdown element not becoming invisible when I click again on the image?

What do I need to do for the Dropdown element to become invisible when I click again on the image element?

Is the advanced Conditional Rendering configuration the best option for this to happen?

How do I make this happen?

What is the best option for this to happen?

Can you post a few screenshots so I can better understand your issue?

Try binding your variable to the „display“ property. This should work. With Conditional Rendering the dropdown is completely removed