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!
Hi Stephen,
I’ve made an example exactly as you have described, and it works correctly for me (toggle show and hide on the square by clicking the button - see screenshot below). Are you able to share your file so we may have a look?
Thanks for the reply @uxcal! I thought I had it right…
I recreated and it worked, so I think the problem was I may’ve overcomplicated it by having all the components and rules in a ‘design system’ file that were used in another file. Basically the ‘toggle’ is in the header so I had a component with that. Then I set the visibility on the grid (item I wanted to show/hide) in the same file. But I guess when they’re pulled into the file they don’t communicate?
So anyways, setting up in the file seemed to work!
One odd thing I noticed was when I duplicated an Artboard with this working. The component with the interaction had boolean as “missing” and needed to be setup again. No biggie but thought it was worth mentioning!
@Stephen_Moy1@uxcal I need to be able to do this, too, but I’m not able to do this:
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.
I don’t see a way to apply any variable to any eye icons. What am I missing?
Is there a tutorial on this?? I can’t seem to find anything. I’m trying to make a DnD map where I can click on an icon on the map key and then have other icons on the map appear.
Hi @Solika_O_Neill. There are probably other tuturials available on YouTube but I used this one as a base for mine. Hope it helps or sends you down a YouTube rabbit hole of other linked tutorials that might be closer to what you need
