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:

WapplerPrevious   WapplerNext


4 posts were split to a new topic: Toggle Flex Container vidibility

Is there an easier way to do this. Like on button click show an element?

That’s the way to show an element on button click :slight_smile: Using variables is the best and easiest way to do it.

1 Like

@Teodor could you please update this screen I don’t see how to do it with the current version. I don’t see this option. Thanks for your support.

Just select “Code” in the data picker dialog, it’s the same.

Thanks. Works
What means == ? (just want to understand the “logic”)

== means equal to.

These are standard Comparison Operators, you can learn more here:

For things like this would be amazing to get something “a la bubble” than humans without dev background can understand in a more intuitive way like : “if this then that etc”. It’s something planned in Wappler?