Toggle any Element Visibility


#1

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



Targets and Actions
Using Dynamic Attributes - Part 3: Toggling Class Based on Condition
How-to Guides
Notifications and Alerts
Wappler Official Documentation
Can't get toggler to toggle
Show hide a region clicking on a botton
automatically bumped #2

automatically bumped #3

automatically bumped #4

automatically bumped #5

automatically bumped #6