Discuss

Show or Hide Elements Conditionally

On this page

Intro

You can show or hide elements on your page conditionally, i.e. when a specific condition is met. There are two ways of doing in Wappler - using a conditional region and using the dynamic show and hide attributes. In this tutorial we will explain how to use both methods and what are the differenced.

We have a variable on our page, and we want to show or hide an element based on its value:

Screenshot_1|690x431

The element we want to show and hide is a simple column in the layout:

Screenshot_2|690x431

Show/Hide Dynamic Attributes

The show and hide dynamic attributes allow you to change the visibility of the element. show - will show the element when the condition is met hide - will hide the element when the condition is met

When using the show/hide dynamic attributes the element is not removed from the DOM, it's just hidden by applying a display: none to it. Use them if you want to toggle the visibility of the element often.

First we select the column and add a new dynamic attribute:

Screenshot_3|690x431

Select Display > Show:

Screenshot_4|690x431

And click the dynamic data picker:

Screenshot_5|690x431

We want to show the element when the variable value equals 2. So select the variable value and click the data formatter icon:

Screenshot_6|690x431

Right click the expression and select operations:

Screenshot_7|690x431

Select equals ==

Screenshot_8|690x431

And enter 2:

Screenshot_9|690x431

Click Select:

Screenshot_10|690x431

And then click Select again to apply the condition:

Screenshot_11|690x431

Save your page and preview it in the browser. As our condition is not met, the column will be hidden. You can inspect the page using the browser dev tools and see that it's not being removed from the DOM, just hidden using display: none; CSS rule:

Screenshot_12|690x431

Conditional Region

The conditional region will compile and render its content when the condition is met. When using a conditional region its content is not rendered in the DOM when the condition is not met. Use the conditional regions when the visibility is not toggled often - for example if you only check it on page load.

You can either add the conditional region from the Elements Picker dialog:

Screenshot_21|690x431

Or just convert your column to a conditional region. So click the Make Conditional Region button:

Screenshot_13|690x431

And click the dynamic data picker to select the condition:

Screenshot_14|690x431

We want to show the element when the variable value equals 2. So select the variable value and click the data formatter icon:

Screenshot_15|690x431

Right click the expression and select operations:

Screenshot_16|690x431

Select equals ==

Screenshot_17|690x431

Enter 2 and click the Select button:

Screenshot_18|690x431

And then click Select again to apply the condition:

Screenshot_19|690x431

Save your page and preview it in the browser. As our condition is not met, the contents of the conditional region will not be rendered in the browser. You can inspect the page using the browser dev tools and see that the contents are not being added to the DOM at all:

Screenshot_20|690x431