Discuss

Toggle any Element Visibility

Using the dynamic events and dynamic show an hide attributes you can toggle the visibility of any element on your page.

In our example we have a div container(1) which we want to hide an show when clicking on a button(2):

First, we need to add a variable which will control the visibility state. Right click App in the App Structure panel, and in the Data category, select Variable:

We give it an ID “toggler”:

Then, we set its default value to 0:

Select the element you want to show/hide and add new dynamic attribute:

Open the display category and click show:

Then click the dynamic data picker to select when to show it:

In the data picker select value under the toggler variable (1) and enter == 1 (2) as a condition - just as shown in the screenshot:

This means the element will be displayed, when the variable value equals 1. Click the select button to apply this condition.

Now, select the button and add new dynamic event:

Open the Mouse category and select on Click:

Then click the dynamic data picker:

Select Set Value(1) under the variable and click the add button(2):

This action will control the value on click. If we just enter a value of “1” - it will change the value to “1” and won’t toggle back to “0”. We need to setup a dynamic expression for this.
Click the dynamic data picker button:

Select the value under toogler variable and enter after it == 0 ? 1: 0
What this code means is - if the toggler value equals 0, set its value to 1, otherwise set it to 0:

Click the Select button:

And you are done. Clicking the button on your page now toggles the visibility: