On click toggle boolean variable to show/hide elements on page

Our Score

Basically I have a component which is always in the background of the design. When a toggle link is clicked I want to hide this in the prototype – and display it when the toggle clicked again. So basically the element shows/hides when another, separate element is clicked.

I’ve setup a local boolean variable called “Grid Visible” which has the values true/false.

I’ve then ensured the background component has this applied to it in the Layers panel by right clicking the eye icons and applying “Grid Visible” to it.

If I go back to the Local Variables panels and click the “Value” so it slides between true/false the visibility of the component disappears and reappears – so that’s all working!

But when I try to Prototype I can get the link (which is in a totally separate component) to work with “On Click” and then “Set Variable” or “Conditional”. This is what I currently have (below). In my head this is going On Click if the value = false, set it to false. If not, set it to true but nothing changes in the prototype – am I missing something?

“True” is the default value. So a click would set it to false (to hide the element). Then another should return it to it’s default state.

As I mentioned, if the “Local Variables” panel, toggling the boolean variable does show/hide the elements. So I assume that’s all setup correctly. It’s just the logic of the link/click action.

Hope someone can help and tell me where I’m going wrong here!

This topic has been closed for replies.