How do I make a toggle button

I have a Grid sprite with opacity of 0. I have a GridButton that when clicked makes the Grid opacity to 100, thus showing the Grid. My Grid and GridButton do not have any variables.

How do I make this same button a toggle, so that if it is clicked again, the Grid opacity then goes back to 0? Thank you!

[attachment=0:11kqna2p][/attachment:11kqna2p]

I do it like this, create a global variable call opacityToggle, it holds one of two values, it is either on or off (or maybe 1 or 0). On your grid button give it two frames of animation (set animation speed to 0). Everything then works off the variable. If oppacityToggle is "on" then set the animation frame for the button to on. If oppacityToggle is "off" set the Gridbutton animation frame to 2 (off). Make sure frame one is your On image of the button, and frame 2 is your off animation for the button (I am assuming here that the button is a sprite with the on touch/on click behavior). You then have an event that says if opacityToggle = "On" Set opacity to 100, Else Set opacity to 0 (or whatever it should be.

Basically you use the variable to track if the opacity is on or off and everything else uses that.

Make an instance boolean variable named "opa" in your "Grid" sprite.

GridButton on clicked > Toggle "opa"

Is opa O & Trigger Once > Set Grid opacity to 100

Is opa X & Trigger Once > Set Grid opacity to 0

Make an instance boolean variable named "opa" in your "Grid" sprite.

GridButton on clicked > Toggle "opa"

Is opa O & Trigger Once > Set Grid opacity to 100

Is opa X & Trigger Once > Set Grid opacity to 0

Thank you. That worked for me. I am attaching an image so other users who may need help can see how to code it. My boolean variable is named "Helper."

[attachment=0:233avn7m][/attachment:233avn7m]

I do it like this, create a global variable call opacityToggle, it holds one of two values, it is either on or off (or maybe 1 or 0). On your grid button give it two frames of animation (set animation speed to 0). Everything then works off the variable. If oppacityToggle is "on" then set the animation frame for the button to on. If oppacityToggle is "off" set the Gridbutton animation frame to 2 (off). Make sure frame one is your On image of the button, and frame 2 is your off animation for the button (I am assuming here that the button is a sprite with the on touch/on click behavior). You then have an event that says if opacityToggle = "On" Set opacity to 100, Else Set opacity to 0 (or whatever it should be.

Basically you use the variable to track if the opacity is on or off and everything else uses that.

Thank you for your help. This is a good way to do it with animation.

Even with the method you used you can still set the animation frame of your button as well. If Is Helper > Button Frame = 1. If Not (X) is Helper > Button Frame = 2. This way you can give a visual indicator of what the current setting is.

opacity to 0... Invisible is better as draw is skipped

+ Button: On clicked
    + Grid: Is Visible  -> Grid: Set Invisible
    + Else              -> Grid: Set Visible[/code:3b90y1lx]