Collapsible Group plugin?

Hello all

Is there a plugin for simple collapsible groups such an this image below? I have searched but found nothing. If not, is there an article on the easiest way to create one with Bubble?

That’s standard RG behaviour. Here ya go.

Live example

Editor for you to see how it’s made

2 Likes

Is there a reason you need/want a plugin for this?

I’d just use the standard Bubble features for this personally (collapse height when hidden, with some custom states), but there may be some plugins that give you more options and control.

In terms of how to create something like the above in standard bubble, it’s fairly simple.

Have a repeating group to display your ‘Collapsable Group Items’.

Inside each cell have 2 groups - the Header/Title group and the Content group.

Make sure the cell is tall enough to contain both groups, which need to be stacked one above the other with no overlap (as they are in the fist cell in the image above).

If you want to have some space appear between cells, have the cell slightly taller than the combined height of the 2 groups.

Make sure the Header/Title group is visible on page load, and the Content group is Not visible on pageload, with ‘Collapse height when hidden’ selected.

Have a custom state on the header group of type yes/no that determines when the content group should be visible, and put a conditional on the content group to be visible when that custom state value is yes.

Use conditions on the +/- icon to make them change as needed, and create 2 workflows when they are clicked - one to set the header state to yes when it is no, and one to set the header state to no when it is yes.

Edit: Or, as @casheets123 excellent demo shows, just use a toggle action instead of custom states to hide and show the content group.

1 Like

@adamhholmes thanks so much for that detailed explanation. I wanted a plugin to save time but will follow your tutorial instead. It seems straight forward enough.

@casheets123 muchos gracias. that demo is very useful

1 Like

I literally built that example in under 5min. which is faster than just opening the ridiculously slow bubble plug in menu :wink:

In the example above, you could of course limit it to one cell to save space in the editor, and not having the scroll show up when you have fewer cells. I just did it when building because it makes it easier to see space between cells when setting it up. :slight_smile: Lemme know if you run into any issues. :+1:

1 Like

Perfect. you guys rock. gonna get started on it now

1 Like

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