On a project I was working last week I was asked to create an accordion structure, for ease of use, from an existing Gravity Forms form. The form had a structure in which price fields were separated by section fields, which is a great structure to start with.
Prerequisites
First thing – the form has to contain sections which separate groups of fields.
The second thing is to identify what kind of fields are contained between the sections ( maybe they are not all the same ). Make a note of the specific css classes of those fields. For example: price fields have the class “gfield_price”.
The code
First you have an array for the section which you will check to identify what to do. Next you create an accordion container which will contain the fields whose visibility you can toggle. After that you append the fields to the container and add the actions which allow opening/closing accordions. Bonus: you can also add a small text to make the section more intuitive to click.
This is the final code with explanations for each operation:
EDIT: after a comment making a good observation I updated the code to include a toggle of the EXPAND/COLLAPSE text.