Groups one on top of each other

Hi everyone.
I put 5 groups of same size one on top of each other, then when I press a button I want to display the respective group. The problem is that they all are behaving like 1 big group, so when I hide one group they all hide…
How do I make this stack of groups without this problem?
Thanks

Hi,

You can try to actually combine them in a single group. And the select the checkbox ‘Collapse the element’s height when hidden’ for each of the 5 groups. And you have configure the conditionals for each group separately to make sure that each group is linked to a specific button.

Hope this helps. If it doesn’t work, you can send screenshots on what you currently have or make your app public.

2 Likes

I tried what you said but didn’t work
He still hide all groups above the first one

Here is what I’m trying to do


When I click a button I set the state

Hi Daniel,

I’ve made an example for you in the public Bubble Test app.


Cheers, Jessica

3 Likes

In my application, I have multiple groups on top of each other. Their visibility is controlled by a button (one button for each group I want to control visibility of). So if you have 5 groups, you’d have 5 buttons. In the workflow for each button, you’d have a “Show Group” for one of the groups and “Hide Group” for each of the other 4 groups. So you’d have 5 workflows, each with 5 steps (1 to show group, 4 to hide groups).

A few other things that may help. On page load, you’ll probably want to have one of the groups be visible and hide the other four. Similar to above, add a page load event and add the 5 steps. Also, from a UI/UX perspective, you probably want to change the color or other visual cue on each of the 5 buttons. For me, I change the color and font of the button associated with the currently active group. I handle this by creating a custom state for each button (ie “Button Active”). In each of the 5 workflows, the button associated with the active group would have the custom state set (ie “Yes”) and the other 4 would have the custom state set to “No”. Then back in the editor, go to each of the 5 button’s Conditional tab and setup the condition you want. You’ll need to conditions - one for one the button is active ("Yes’) and one when it’s “No”. Also - on page load, you’ll need to set the custom state for each value otherwise you may get some buttons with their condition set to “Yes” (due to prior history)
Hope this helps…
tx
Nikolai

1 Like

Thanks, Jessica! That’s exatcly what I needed… footballresearchprue was right about the ‘Collapse the element’, I just used in the wrong way.

Also thanks, Nikolai!!

You guys saved me.

1 Like

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