The easiest way to hide/unhide elements

UI Aug 19, 2020

Often you would've wanted to show some elements only under certain conditions. For example, an icon when a form has been submitted. An input field only when a certain button has been clicked. You could use the 'Show' and 'Hide' function in the workflows, there is a better way. Custom states.

Custom states are temporary values. The value stored in the custom state is not saved in your database and is lost when the page is reloaded. These are handy for hiding/unhiding elements. If you have no idea what custom states are, you can read more about them here.

How to create the custom state

Select any element on your page where you want to store the custom state. You can store it on the page itself or any element. It makes no difference.

Click the small 'i' icon in the top corner when you open the element's properties.

Create a new custom state. To keep it simple, we can keep the Type as Yes/No field as we only we want to hide/unhide it. If you have a complex condition, you can also keep it as a number or text.

How to hide/unhide the element

Next go to the 'Conditional' tab of the element that you want to hide/unhide. Create a new condition that when the custom state is Yes, the element is visible (checked). Also, create another condition that when the custom state is No, the element is visible (unchecked).

If you had selected the custom state type as a number or text, you'll create the condition similarly. The logic being that only when the custom state matches a certain value, this element will be visible.

How to update the custom state

To trigger the hide/unhide action, you would need to update the custom state using workflows. You can use 'Do when condition is true' or 'Element is clicked' to trigger the workflow. Next, go to Element actions - Set state - Select the element where you have saved the custom state and assign the value.

To read more on this, click here.

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/custom_states

Editor - https://bubble.io/page?type=page&name=custom_states&id=nocodeassistant-tutorials&tab=tabs-1


If you need some help with your Bubble app, hit me up at [email protected] or follow me on Twitter

Tags