On Click, Change Visibility of Content Box

Hello everyone!
If I have 2 context boxes, the first one that has visibility =TRUE and serves as a button and the second with visibility =FALSE, how do I get the second context box to show once the first one has been clicked? I want to add instructions in the second context box that only show once the user clicks the first context box labeled "Instructions".

  1. Create a new content block.
  2. Add a data cell, and set it to be a variable. Name it "Button1Visible"
  3. Set default value of Button1Visible to =TRUE.
  4. For Button1, set visibility to =$[Button1Visible]
  5. For Button1, add an automation, and add a navigate step. CLisk Update current screen, and Set the variable $[Button1Visible] to =TRUE.
  6. For Button2, set visibility to =not($[Button1Visible])
  7. Add an automation to button 2, with a anvigate step, update current screen, set variable $[Button1Visible] to =false.

Test that.
If it works, then set the visibility of that new content box to =false , but don't delete it.

1 Like

Thanks Andrew! However, how can I set the Button1 visibility to =$[Button1Visible]? This doesn't evaluate to true or false. I'm not understanding this process.

So, in step 3 above, we set the default value of $[Button1Visible] to =true.

Oh! I just realized I gave you the wrong instructions for step 5 and 7. Button1 should flip our variable to FALSE and button2 should flip it to TRUE.

Thereafter, the value of $[Button1Visible] only changes when the buttons are clicked, and then, we only write =true or =false into that variable.

So initially, only button1 should be visible. Then, when you click it, it should flip the variable to false, and Button2 becomes visible.

1 Like

Thank you Andrew, that makes much more sense! How can I add text to $[Button1Visible] and make it an Instructions field for my app if I can only write =true or =false into that variable?

Hello @Sing-e9c5, Just wanted to provide additional info to your follow up question. Once you have the $[Button1Visible] functionality that @AndrewB provided above, you can then base any other object's visibility on the Button1Visible value (True or False) and therefore control it by the two buttons. I'll give a pictorial below (which includes Andrew's steps):

  1. Create a InstructionVisible variable data cell with the following properties.

  2. This data cell should be inside of a Content Box that has a visibility setting of =FALSE. This is just a hidden variable to control whether to show the text or not.

  3. Then you have a button with the following properties (Show Instructions in my example). Visibility is set to =NOT($[InstructionsVisible]) and the automation updates the hidden variable to =TRUE.

  4. Next you have a Block with your instructional text as well as another button (Hide Instructions in my example). This Block has a visibility setting of =$]InstructionsVisible.

Note that the visibility of anything you put in this Block will be managed by the setting at the Block level.

  1. Lastly, the Hide Instructions button which is in the Block above has the following automation.

Now let's see it in action...

Hope this helps!

2 Likes