Hide/Show Widget on Button Click In Appsmith

How to Use This App?

1. Click on the Hide button and note that the Text widget is hidden.

2. Click on the Show button and note that the Text widget is visible.

How to Build This App?

1. Add a Text widget and set a Text for it.

2. Add two (2) Button widgets.

Button Show: onClick set {{storeValue("isActive", true)}}

Button Hiden: onClick set {{storeValue("isActive", false)}}

Text widget: Visible set {{appsmith.store.isActive}}

3. Use the storeValue() method in the onClick event of each button to store a boolean value to Appsmith store based on which the Text widget will be shown or hidden.

4. Set the Disabled property of each button, so that each will be conditionally enabled. If the text is visible, the Show button will be disabled and the Hide button enabled, and vice-versa.

5. Set the Visible property of the Text widget so that it will be conditionally enabled/disabled based on the value stored in Appsmith store.