How to set up a 3 step form using collapsible elements?

Hi Team,

I am yet to figure out how collapsible elements work and thought that it would be the best option to set up a form with expandable sections, so that it uncovers the fields that need to be populated for each section (see diagram below).

I need some direction on how to best achieve this please…

Is creating a Repeating Group with the menu headings so that once click it shows the required input boxes in each section the best way?

I am not confident using a Repeating Group would work as it will replicate the same thing for all cells?

please advice?

2 Likes

Completely doable with repeating groups, but if your content is static and each submenu is quite different, I recommend just showing/hiding groups that collapse when hidden. Maintain a custom state on the over-arching parent group that contains which submenu is currently open.

I actually have this same design for part of my app, but haven’t gotten around to building it yet. Hoping you get this working. :slight_smile:

Thanks @Scott

I achieved what I wanted using collapsible groups.

@Kfawcett FYI

https://reso_test.bubbleapps.io/version-test/index?debug_mode=true

Are they collapsible groups in a repeatable group?

No, they are are normal groups & buttons within an overarching normal group.

I figured that using a Repeatable Group (RG) may not work as I want the headings and content within each section to be different. A RG will just simply repeat the same thing.