Repeating group - toggling background color?

hi, i’ve spent this morning trying to find an answer to my (very basic question). i’m hoping to get help here!

this is our app in preview:

what i’m trying to do is have a toggle function linked to the closed eye icon for each item in the repeating group. if the user clicks on the eye once, the entire row should be grayed out. if the user clicks on the eye again, it will return to normal (i.e., white background).

i’ve played around with creating states for the icon, and then trying to add a condition to the formatting of the text box but can’t figure out what i am doing wrong.

thank you for any help at all!

Put the number, text and two icons into a group element which will be inside of the R.G.

Make the width and height of the group the same as one cell of your repeating group.

Set a custom state onto the icons: such as “state_is_clicked” = yes/no or 1/0

Make a workflow for when the icon is clicked to set the state. Make sure you set up two workflows, one for when the state value = yes and one for when state value = no so that you can have the same icon switch.


if you are using two icons to represent the different “state” you can set conditionals for them to be visible or not visible when the other one is visible or not

Once you have your icon states figured out and your workflows for setting them properly you should then set up the group element that contains all the other elements ( icons, text, number )

The group element should have a conditional on it to be background color grey when the state of the icon = yes

If you want the group to be on top of the other elements, effectively “grey out” you should have a second group element that is “bring to the front” on effectively sitting on top of the other elements and is hidden until you click the icon and set the state…use conditionals on the grey group to hide / show it ( ie: visible not visible )

However, if you use a group to sit on top of the elements after it is visible it will probably cover all elements including your icons.

Play with the “bring to front” “send to back” commands…also check out a link to a post I made recently about blur groups

If you are new to bubble and not familiar with the design features and the mobile responsiveness, I would highly recommend getting familiar with those before jumping all the way into creating the app…I wasted way too much time redesigning things after I finally learned about the design features and responsiveness.

Now when I develop an app I am much faster and I design as I build the workflows and other conditionals.

thank you for the quick response. was missing how to create a group. thanks again!

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