How to toggle an element's visibility by clicking on it

underhill.dan · 2020-06-11T19:15:50.223Z

Here’s a simple question…

I have a repeating group. There is a group element in it to serve as a background color only. I want to have that background color change when the user clicks on it to highlight the row of interest. Then when a user clicks a different row, I want all of the background group’s colors to reset and then change again and just highlight the new row that’s been clicked.

I can get the background color to change upon a click fine, but it applies that color change to ALL of the rows in the repeating group, not just the row that is clicked. Furthermore, I cannot figure out the best workflow to resetting the color when a new row is clicked so that its respective background can be highlighted.

The images show the gray background when nothing has been clicked. When I click the 3rd entry (“Demo User”), all of the backgrounds have changed to yellow, not just the one I clicked.

I set this up using a custom state for when the background color group is clicked, “yes” is placed in the custom state. Then, the color change is evaluated on that.

So then, how to I set up the logic so that I can click another background group and have only that group become yellow while all of the others turn back to gray?

Thanks.

1a780×894 33.9 KB

1b780×894 33.5 KB

sudsy · 2020-06-11T21:53:25.061Z

Hi @underhill.dan,

You should first familiarize yourself with conditional formatting via the Conditionals tab of the Properties editor.

The basic idea is that you can change the appearance of elements based on certain conditions or “states” of your app. In your case, you’ll likely want to keep track of the currently selected cell in your RG and then change the appearance of one or more elements in that cell when it’s the currently selected one.

I do exactly that in my Upload Buddy demo. Click a file in the Uploaded Files list to select / deselect. To see how it works, click the menu in the upper right and choose Edit Mode. The RG itself has a custom state called “selected_upload” which is set via workflow whenever the text element within a cell is clicked. Then, on the Conditionals tab of the text element, the background color of that text element is changed based on whether it’s the currently selected one.

Play around with Conditionals a bit on your own. You’ll get the idea.

underhill.dan · 2020-06-12T16:24:24.198Z

Hi @sudsy,

Thank you so much for the reference project. Since I’m still new to the Bubble paradigm I had to dig through your workflow a bit for how you accomplished the end result. But, I was successful in finally making it happen. Since this is such a common piece of visual feedback for repeating groups (“lists” in other coding terms) I would love to see someone create a definitive video with a step-by-step walk through about how to accomplish this along with detailed explanation of what each step is.

Thanks.

system · 2020-08-20T19:15:51.741Z

This topic was automatically closed after 70 days. New replies are no longer allowed.