In this article, we will mention how to make change the visibility of a component in Code2.

In this example, let's assume that we have a button and two div components. One div is filled with red color, and the other one is filled with blue. As a default view, the user can only see the red div. After clicking the button, the red div will be hidden, and the blue one will be shown. If we click the button again, the opposite action will be performed.

To do this, we have to start a flow that is triggered by the 'When component is initialized' action and set a page variable as 'isRed'. It is initial value has to be false.

We will use the hidden property of divs in the calculated property. If we return false, it shows, but if we return true, it hides.

And the last thing, we will create an action for the button. It will work when the button is clicked. In this action, we'll set 'isRed' variable again. When we click the button, it does the opposite of the value of 'isRed'.

That's it! Let's check the recorded video and what it will look like in action.

Did this answer your question?