Using Dynamic Attributes - Part 2: Showing Elements Based on Condition


Dynamically show/hide HTML and Bootstrap 4 elements based on Events

We'd like to hide the personal details container when the user has not agreed to the terms and conditions by selecting the checkbox.

Step 1: First, we have selected the row which is the parent that we put the “Personal Details” area inside, and given the parent container row an id called, “personaldetails”(1).

Step 2: Click the add dynamic attribute button.

Step 2b: Select display.

Step 2c: Select show

Step 3: The “Show” attribute has been added to the div. Now let’s select when the div should be shown.
Click the dynamic data picker icon.

Step 3b: Expand the checkbox attribute in the Data Bindings dialog. Choose the “checked” property and click the select button. Wappler adds an expression automatically just like the previous tutorial.

Demonstration: Now, our “Personal Details” div container will only be displayed when the “terms and conditions” checkbox is checked.


You can see this immediately in live design view.

WapplerPrevious   WapplerNext

Using Dynamic Attributes - Part 1: Disabling Confirm Password Field
Wappler - The Visual Web App Creator
Wappler Official Documentation
automatically bumped #17
automatically bumped #18