# How to create forms with collapsible and expandable sections

**URL:** <https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections/301>\
**Category:** Form Designer\
**Created:** [August 2, 2016, 3:37am UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections/301 "2016-08-02T03:37:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wfg-admin](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/wfg-admin/32/714_2.png) [@wfg-admin](https://discuss.workflowgen.com/u/wfg-admin)\
**Post date:** [August 2, 2016, 3:37am UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections/301/1 "2016-08-02T03:37:53Z")

</div>

You can make form sections collapsible and expandable using JavaScript and the `FORM_FIELDS_COLLAPSED` parameter.

1. In the Form Designer, add a section called `FORM` at the top of the form. The code below will set it to hidden for every web form action.

2. Add a textbox field with the ID `FIELDS_COLLAPSED` to the `FORM` section.

3. On the **Web References** tab in the Form Designer configuration panel, check the **Include jQuery API and jQuery UI libraries** , and add the following code:

4. 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.

Download the [2 Levels Approval Collapsed](https://download.workflowgen.com/forum/how-to-create-forms-with-collapsible-and-expandable-sections/2_LEVELS_APPROVAL_COLLAPSEDv1.zip) sample process, unzip it, and import the XPDL into WorkflowGen to see it in action.

---

<div class="post-metadata">

**Author:** ![cpnamdevelop](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/cpnamdevelop/32/440_2.png) [@cpnamdevelop](https://discuss.workflowgen.com/u/cpnamdevelop)\
**Post date:** [February 28, 2017, 11:00pm UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections/301/2 "2017-02-28T23:00:42Z")

</div>

This sample works great. But, for example if I put ac dropdown and a function on the SelectedIndexChanged event, the forms sections defined as collapsed always collapse back at each postback.

Is it possible to keep the actual collapse state at each postback???

---

<div class="post-metadata">

**Author:** ![james](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@james](https://discuss.workflowgen.com/u/james)\
**Post date:** [August 30, 2017, 3:47pm UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections/301/3 "2017-08-30T15:47:37Z")

</div>

> [@wfg-admin](#):
>
> FORM\_FIELDS\_COLLAPSED

I was having trouble getting the script to run. Step 2 in the instructions say to give the textbox the ID value of “FORM\_FIELDS\_COLLAPSED” but it should be just be “FIELDS\_COLLAPSED”.

---

<div class="post-metadata">

**Author:** ![jianan.hsu](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/jianan.hsu/32/411_2.png) [@jianan.hsu](https://discuss.workflowgen.com/u/jianan.hsu)\
**Post date:** [August 30, 2017, 6:26pm UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections/301/4 "2017-08-30T18:26:34Z")

</div>

Hi James,

Yes, you are correct. The textbox field ID is always automatically prefixed by the section ID which in this case is FORM.

---

<div class="post-metadata">

**Author:** ![pnicoll](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/pnicoll/32/454_2.png) [@pnicoll](https://discuss.workflowgen.com/u/pnicoll)\
**Post date:** [August 30, 2017, 6:34pm UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections/301/5 "2017-08-30T18:34:56Z")

</div>

Hi James,

Thanks for letting us know. We corrected the error and clarified some of the instructions.

---

<div class="post-metadata">

**Author:** ![james](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@james](https://discuss.workflowgen.com/u/james)\
**Post date:** [May 22, 2018, 2:44pm UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections/301/6 "2018-05-22T14:44:50Z")

</div>

Is there a way to reference the current action step or active form section that is not hidden or read only to change the background color of the section title? Such as making the background color green behind the active form section title to quickly visually reinforce what section is active. I am using the Form Designer method and javascript or .Net code would be available to me.

Thanks,

James

---

<div class="post-metadata">

**Author:** ![eddy.daouk](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/eddy.daouk/32/672_2.png) [@eddy.daouk](https://discuss.workflowgen.com/u/eddy.daouk)\
**Post date:** [May 23, 2018, 4:40pm UTC](https://discuss.workflowgen.com/t/how-to-create-forms-with-collapsible-and-expandable-sections/301/7 "2018-05-23T16:40:01Z")

</div>

Hi James,

In code behind, you can use the property **CurrentWorkflowActionName** to identify which action you are currently on. And to change the background color, you can use the **BackColor** attribute of the section’s panel control.

For example:

```auto
if(CurrentWorkflowActionName == "REQUEST"){
   // REQUEST is the ID of the section
  REQUEST.BackColor = System.Drawing.Color.LightGreen; 
 }

```

Here is a list of all the different colors that you can use:  
[https://msdn.microsoft.com/en-us/library/system.drawing.color(v=vs.110).aspx](https://msdn.microsoft.com/en-us/library/system.drawing.color(v=vs.110).aspx)

Regards,  
Eddy.