# How to create forms with collapsible and expandable sections with an icon

**URL:** <https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections-with-an-icon/2121>\
**Category:** Form Designer\
**Created:** [January 24, 2023, 8:30pm UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections-with-an-icon/2121 "2023-01-24T20:30:08Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![lyelle](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/lyelle/32/455_2.png) [@lyelle](https://discuss.workflowgen.com/u/lyelle)\
**Post date:** [January 24, 2023, 8:30pm UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections-with-an-icon/2121/1 "2023-01-24T20:30:08Z")

</div>

# Overview

When a form gets big, it can be quite long for a user to scroll down to their section, which makes the usage less user-friendly.

One solution is to implement a section collapse, which will reduce how much the user needs to scroll and only expand the sections that are required for that specific user.

# Implementation

1. In the form designer, add a new section. In our process sample we added the `FORM` section.

2. Add one textbox field to this new section; this field will contain a list of sections to be collapsed. In our process sample, the textbox is named `FIELDS_COLLAPSED`.

3. Click the gear icon to open the **Form configuration** panel.

4. On the **General** tab, check **Enable AJAX mode**.

5. On the **Web References** tab, check **Include the jQuery API and jQuery UI libraries**.

6. Add the following stylesheet in the text area:

7. In the Form Designer, click **JS** in the toolbar to open the JavaScript code editor.

8. Copy and paste the following code in the text area:

9. For every web form action, add the `FORM_FIELDS_COLLAPSED` parameter with a comma-separated list of section IDs for the sections you want to display collapsed when the form is first loaded.

A sample process can be found on the WorkflowGen GitHub community:

> **[workflowgen-community/samples/form-section-collapse at main ·...](https://github.com/advantys/workflowgen-community/tree/main/samples/form-section-collapse)**
>
> WorkflowGen community repository. Contribute to advantys/workflowgen-community development by creating an account on GitHub.