Show/hide elements onclick if checkboxes are checked

Hi there,

hanks for reaching out! Your approach sounds solid. I’ve come across a community resource that might be really helpful for you: https://www.figma.com/community/file/1256660046319231869/interactive-variables-components-radio-button-select-all-check-boxes-dropdown-and-accordion?searchSessionId=lrsew3bu-oxsv22swrml.

This resource covers prototype settings related to checkbox actions. I believe you could apply the same logic to your project.

I hope this is useful, but if you have any more questions, please don’t hesitate to ask. I’m here to help!

Thanks,
Toku

Hi, thank you for replying. I took a look at that but that’s not really what I was looking for. I am having issues with the interactions being nested I think… not sure. What I am trying to solve is that when a checkbox is checked (on click), another element is shown, when it’s not checked it is hidden. I can get it to work in one direction but the checkbox doesn’t seem to change back. Is this due to its nesting? Currently, i have the interaction as on click and change to for the checkbox but alas this isnt working. Any other advice? Thanks in advance.

Hi there,

I apologize for the delay in following up. If you have not yet found a solution, could you possibly provide us with the file link so that we can investigate?

Thanks,
Toku

I just submitted a bug report for a very similar issue today! In my case it’s a series of mega menus hidden in a global navigation. I’m using the same logic as you. An extra problem I’m experiencing is that my text overrides are being lost on click.

I’ll report back here with what I hear from Figma support.

Did anyone find a solution to this? I’m also trying to do this, but failing.

@Paul_Harvey you can show/hide elements by creating a boolean that is applied on what you want to hide/show.

For the checkbox, i created the states(unchecked/checked), and for each variant state i gave an interaction to change to state and change the boolean so the elements will hide/show.

When you place the variable interactions on the the checkbox states, you make sure each state does what it needs to do.

I’m trying to do this exact same thing, but I’m not sure how you’re able to apply a variable to a Layer boolean property in the first screenshot. Can you explain how to do that?

@Andrew_Mowe use the “eye” icon of the layer section, right click on it and select a boolean to apply, from that point the boolean will control the visibility of the layer

A cludge solutio I have been using is placing a seleted checkbox on top of an unseletected one. The top one being visible only when a boolean foo is true, and an onClick “set variable” action doing “foo = not foo”. That gives me is a boolean variable foo and a checkbox that views and controls it’s state.

Sounds like your case could use the same for all the checkboxes, e.g. checkboxes controlling boolean variables foo, bar and baz. The “view”-button could then have onClick “set variable” actions setting some booleans e.g. “panelFooVisible = foo” and “panelBarVisible = bar”. That way the checkboxes don’t directly control visiblity and changes happen only after “view” is clicked.