Show/hide elements onclick if checkboxes are checked

Hi, I’m pretty new to Figma and need some help please. :pray:
I’m trying to create a prototype that has multiple checkboxes independently relating to different areas/regions that if when a “view” button is clicked all of those that are checked/true show and those that aren’t hide. I have set up all checkboxes as true, and have given each a separate name. I have also added conditionals to the view button that’s
-onclick if “xxx” checkbox is true,set variable show “xxx” region to true
else set variable “”region” to false.
Hope that’s all clear to understand. Any advice? Thanks

1 Like

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.