How to toggle styles to show if a button is selected/not

[astrodome]

Beginner question here.

Setup
Say you have 4 blue buttons. Only one of the buttons can be actively selected at one time (like in a navigation bar)

Act 1
You click on button 1. Its color changes from blue to green to show that it’s been selected. The rest of the blue buttons remain unchanged.

Act 2
Now say you click on button 3. Two things need to happen. Button 3 has to change color from blue to green. And Button 1 that was previously selected has to revert back to blue.

Question
How do you do this in Bubble?

I know how to create conditionals for a single button. But I can’t figure out how to setup a toggle that automatically adds an active style to one button when it’s selected by the user, and also reverts the previously selected button back to its original style.

[nali]

You can set up custome states for each button.
then in the condition say when the app in in this state change color. the same thing on all the other buttons.

[adamhholmes]

To elaborate on what @nali said…

Create a custom state on an element on the page, or the page itself, of a text type.

In the workflow for each button click, set the state of the element or page to a value that identifies that button (for example for button A set the value to A, for button B set it to B etc.)

Then just add a conditional to each button, so that when the custom states value matches the button, change the background colour to something else.

For example, on button A use the conditional when custom state value is A, background colour is...

Do the same thing for each button.

[astrodome]

Cool. Thanks for the step-by-step explanation Adam. It’s my first time working with custom states and it worked like a charm.

For complete beginners reading this, I strongly suggest you start by learning more about custom states here before trying Adam’s instructions.

[astrodome]

Hey @adamhholmes, quick follow-up question.

Say that in addition to the 4 buttons, you have an input field (like a search bar). And when the input field is in focus, any active button should revert back to its original (inactive) state.

The problem is that I can’t seem to find a way to trigger an event when the input is in focus. (There is an event for when the input changes value, but that would be too late).

Any ideas on how to solve this?

[astrodome]

So after doing some digging around the forum, it seems that there is no official way to trigger an event when an input field is in focus, but I found a workaround here.