How do I make clicking a button toggle another element's visibility?

Developer Support
1

I feel like I have the most basic questions… I’d like to be able to click an icon in a component I created and show/hide toggle an element in the component. My attempt was pitiful. For some reason, I thought I could add an onClick event and then identify the element that needed to be toggled and choose it. Can anyone point me in the right direction? My other thought was to create another variant of my component with the menu already visible and just just link to it from the icon click event.

2

Hi, if you’re using loader-nextjs, then it’s something like:

const [visible, setVisible] = useState(true);
<PlasmicComponent
  component="MyPage"
  componentProps={{
    nameOfElementToShowOrHide: {
      style: {display: visible ? undefined : 'none'},
    },
    nameOfButtonElement: {
      onClick: () => setVisible(!visible)
    }
  }}
/>

(Alternatively you can add code components that inject this type of behavior, but you’d only want to do that if you want to let users express this in the studio.)

3

The code makes sense to me but I guess I don’t understand where I can add it within the plasmic UI. Here’s an animated GIF of what I described earlier. The goal is to use the icon in the upper left to toggle visibility on the menu.

togglemenu.gif

4

If we could do this that would be great

5

The snippet that I showed is not something you would input in the studio UI anywhere, it is code that you would write wherever you are rendering plasmiccomponent

6

I believe you should add in the variants → on click