State in Bubble.io — Follow Along with this Tutorial

It’s a wise thing to create state on the page level rather than on an individual element. It’s a lot easier later to edit the state if it’s in one place.

State ceases to exist as soon as you leave the page. It’s like temporary memory.

In Bubble, create a new page named: state-example

Create a text element called show/hide message.

Create another text element called message-contents with some Lorem Ipsum text or random gibberish.

Double click in the margin of the current page and you should see the page title: state-example in the inspector. Click the info icon in the top right and you’ll see an option to add a state.

Give your state a clear name that will help you recognize it when you return to it in the future. Set the state type to yes/no with default no. There are various options for other use cases.

For our example, we want to show and hide some text when clicking a button that says show or hide (depending on the state).

Double click the show-message button. Click the conditionals tab. Set one conditional to show the text show message when state-examples’ show-message is no. Set another conditional to show the text hide message when state-examples’ show-message is yes.

Double click the show-contents text. Uncheck visible on page load and set to collapse when invisible.

In the Workflow tab, create two events.

Event #1 and #2 will both be when show/hide message button is clicked.

Event #1 will happen ONLY WHEN state-examples’ show-message is no and will have an action that will SHOW message-contents.

Event #2 will happen ONLY WHEN state-examples’ show-message is yes and will have an action that will HIDE message-contents.

Try it out. See if the show/hide functionality works. If configured correctly, the message-contents should initially be invisible. You should be able to click show message and the message will show. Then you should be able to click hide message and the message will disappear.

It’s a good idea to have text on your page that shows current state in the version-test mode if state gets more complicated. It’s easy to test and debug your website that way. For this example you could have text that says: show/hide: state-examples’ show message. Then when rendered on the page it should show: show/hide: yes (or no — depending). At first debugging may not be necessary. However, over time it can be very helpful to see what’s happening behind the scenes! Invisible problems are much harder to figure out!

Thanks for reading and for enjoying Bubble!

If you have any comments on this process, please email nathan@sayingthings.com.

1 Like