Forum Academy Marketplace Showcase Pricing Features

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?


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

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.