[Solved] Collapsible elements within a repeating group's cell - is there a way to do it?

I want to create a collapsible menu, in which the menu items are the items of a list displayed in the cells of a repeating group.
When one of these options is clicked, ideally a second element will show up inside that same cell (ONLY the selected cell) and push down the other cells below. Is there a way to do this?

Alternatively, I could settle for displaying a repeating group underneath the selected cell (possibly by pressing a button or a shape inside the cell), which would consequently hide the other cells below, if there is no better way to do it. I haven’t been able to do that either though.

Any ideas?

Hi @kahan.jonathan, is something like this what you’re looking to achieve?

Preview: https://forumapp3.bubbleapps.io/version-test/collapsemenus?debug_mode=true
Editor: https://bubble.io/page?type=page&name=collapsemenus&id=forumapp3&tab=tabs-1

3 Likes

Yes, thank you so much, this is exactly what I was looking for!
Now I just need to wrap my head around custom states… unfortunately, there are no lessons/tutorials on the subject

What I don’t get is, since there is no conditional formatting on any of the elements, where is the custom state “minimized” defined?

Awesome! No problem :slight_smile: And you’re right, the minimized set state doesn’t do anything (I forgot to delete it). I originally included it because I was trying to see if there was a way to have all of the repeating groups ‘load’ and then have them become minimized once the entire page is loaded. That didn’t load them and then hide them, so that custom state is unnecessary.

Custom states took me a long time to understand. They can be used for a variety of things. One being, showing and hiding different elements depending upon the state. For example, you could have a custom state on a group called ‘Current View’. Inside the group you could have a map element, a shape element, and a button element (each only visible depending upon the custom state of the group). The ‘value’ in the custom state is like a label. So if my custom state on Group A was ‘Current View’ (type: text, list: no), then I could assign values such as ‘Map’, ‘Shape’ and ‘Button’. Then in the conditional formatting of the map, I would say 'This element is visible when Group A’s Current View is Map" (you manually type in the word Map there). Then in the Shape’s conditional formatting I would say ‘This element is visible when Group A’s Current View is Shape’". The same process would happen for the Button element. It’s totally up to you what ‘values’ you decide on; it’s just a way for you to remember what is being shown and what isn’t.

Custom states can also be used to do more complex things such as creating temporary lists. Nigel created this helpful example in the forum to illustrate how this is possible using custom states: https://bubble.io/page?type=page&name=listselect&id=forum_app2&tab=tabs-1

4 Likes

Thank you @fayewatson! I’m still not perfectly clear on everything though, especially on how the first example you posted can work without any conditional formatting whatsoever.
For now I have found a workaround, I would really like to master custom states though, I hope the founders or the community will make a tutorial at some point.
Anyway, thanks a lot for the explanation!

Ohhh I see :slight_smile: So those elements were hidden on page load (minimized) because in the property editor, this box was left unchecked to hide each of them on page load.

They become visible depending upon what is clicked (using the Element Action → ‘Show’ or ‘Hide’) in the workflow.

**That forum example was created before the new Element Action ‘Toggle’ existed (which ‘shows’ and ‘hides’; that would probably be best to use instead of a ‘plus’ icon that shows and a ‘minus’ icon that hides).

2 Likes

That’s great, thanks a lot @fayewatson! I’ll try to replicate this
@iamsalar check this out

1 Like

Hi Faye et al,

As an extension to this, I was wondering whether there is a way to auto close an ‘open’ item when another item is clicked?

In my example, I have a repeating group of youtube vids and when you click on the video, a collapsing group opens to show the description and some other information. What I want to be able to do is auto-close this open group when I click on another video so I am only ever just showing the details of the video I clicked on.

Any idea if this possible?

Cheers
Lyndon

I have done this in the past using a custom state on each object, you have a common workflow that sets all the custom states to not visible (however you want to name them is up to you) then set the one you want to visible. On top of this use a conditional on each option to look at its on state to determine if it then need to be visible or not.

Thanks Dave.

Just trying to wrap my head around this. I understand the concept where there are multiple objects that I want to set a custom state, however, as there is essentially only one object (one collapsible group in a repeating group cell), I’m not sure how I go about closing an open group in a different cell to the new one I am opening. Sorry. I wasn’t very clear in my last message.

Any thoughts?

Cheers
Lyndon

One way you could do this is have the collapsible group set to only be visible when another group’s Custom State (Number) equals Current Group’s Cell’s Index #

To Do this:
Make a workflow for when the video is clicked. The workflow will be
Set State of Repeating Group (or any element OUTSIDE a repeating group cell) - call the State ‘Selected Cell’ and make its type Number
–> set state of this repeating group to ‘Current Cell’s Index’

This assigns a number to the custom state that will equal the repeating group’s cell #

Make the collapsible group Not visible on page load.
Then put a Conditional on the collapsible group within the cell --> When Repeating Group’s Custom State is Current Cell’s Index (or parent group’s current cell’s index, etc) -> Then this element is visible

2 Likes

Or depending on how you have the repeating group data set up you may want to use something other than a Number, or want to to ‘Reset’ the Custom State

Example - if you have a ‘Next’ button to view more videos on the list, then you will need to reset the Repeating Group’s Custom State when the Next button is clicked. If not, then the next group of videos showing will have one of the collapsible groups expanded

Thanks very much! This is a really nice solution. The first approach works with one little sticking point I’m trying to work out.
When I click a video, then click another, I’m unable to open the first one I clicked. I think it’s something to do with refreshing the cell reference in the custom state perhaps?

Sorry. Jumped the gun on that. I had an old custom state action causing it. Removed that and it’s working nicely.

Thanks very much.

Cheers

You can also set the type of the custom state to be the repeating group’s type of content. For example, if you’re doing a search for “UserVideos”, then you can have a custom state, set on the page (ex: videopage), called “Current UserVideo” (Type: UserVideo, List: No).

The workflow could be --> “When Description Group is clicked” --> Element Actions --> Set State --> Element: videopage, Custom State: Current UserVideo, Value: Current cell’s UserVideo.

Then create a conditional statement on the expanded description group which is “When Current cell’s UserVideo is videopage’s Current UserVideo” --> This element is visible. This would make sure that only one description is open at a time.

Then you can create an additional workflow which is “When Description Group is clicked and when Current cell’s UserVideo is videopage’s Current UserVideo” --> set the value of the Current UserVideo custom state to be empty. This would have the Description Group collapse if the User clicks on the Description when that group is visible.

2 Likes

Thanks Faye.
That’s a nice clean approach too. I like it. I did just find that the flow needed the collapse action as well if the user clicked on the open vid. I created a similar function to achieve that but think this will help clean it up more.

I’ll take a look at this approach.

Cheers

No problem Lyndon! :slight_smile:

Hi @gf_wolfer/ @fayewatson,
I have been trying to set the above mentioned workflow but somehow I am not able to do with either of the ways.

I have a RG with a group in it, this group further contains a broad image which covers the entire cell. On clicking this image there is further a setup of several thumbnail images with some text under it. Right now when the broad image is clicked it shows the thumbnails under it, but on clicking the other broad image it doesn’t collapse.

The only way I am able to achieve it presently is by placing a view all/ hide button (text) in the cell.
Kindly help if possible with an example.

I am not certain how you want this to work. Do you want all of the thumbnails to Hide when an option is clicked?