How would I create a "keypad" sort of effect where a link clicked, retains a certain format until a different button on the keypad is clicked?

[SeanB]

Hi,

I’m trying to develop what I consider a ‘keypad’ effect (I’m sure it’s called something else, but this is what I could come up with). Basically, I’ve laid out all the links/clickables in a grid and what I want to have happen is that when the user clicks a certain cell (like a keypad button) in the grid, it changes background color to give the effect that it’s switched on. Then when the user clicks another cell, the background color for the previous cell resets to the default and the new cell has the ‘activated’ background color. See images below.

Default state (no keypad button pressed)

When the “B” cell is clicked on, it activates as follows

And when the “N” cell is clicked next, the “B” cell resets and the “N” cell gets ‘activated’.

I can’t seem to accomplish this by using the ‘button’ element because it looks like the click state is momentary, for as long as the mouse button is clicked – it doesn’t stay clicked. Perhaps there’s a different element, or combination of elements I should use to get the desired effect, so looking for guidance here. I’m new to Bubble and still learning my way around.

Thank you.

[andrewgassen]

I think the easiest way is going to be using the custom state feature in Bubble. Here’s how I would do it:

• create a group that all your buttons live in. Let’s call it Keypad Group
• on that group, create a custom state called, “Active Button” and make the type of state a text
• Here’s the annoying part…on each individual button, make a conditional that says, “When Keypad Group’s Active Button is A, set the color to purple.” You’ll do this in the middle tab of the floating gray element menu
• Then, for each button element, you create a workflow that sets the Active Button state on Keypad Group to the corresponding letter

[SeanB]

Thanks, Andrew. I’ll give this a shot.