Show or Hide multiple fields at once using form collapse tool

Last Update: December 20, 2015

In this tutorial, we will be learning how to hide or show multiple form fields based on a single conditional logic - using form collapse bars. Before to proceed, we must get acquainted with Form Collapse bars first. 

What is a form collapse you ask? 

Well, according to this JotForm article about form fields:


Form Collapse hides/shows a section of your form, and splits your form into expandable parts

In this case, we will be using the Form Collapse to split the form into sections, and we'll be using conditional logic to hide or show them according to end-user action.

1. Insert a form collapse at the beginning of each section

This will mark the start of the form section that you want to conditionally hide/show. Insert as many fields as you want on this section. In this sample form, I will group fields related to each section of a guest, I will have "Guest 1", "Guest 2" and "Guest 3", all having their own full name and email fields.




Form Collapse Configuration

Form Collapse Status will either (by default) collapse or expand the bar that contains the form fields. Visibility applies only to the Form Collapse bar, and not to the fields under it.


Faded form collapse text means Visibility is set to "Hidden"


An Arrow pointing downwards in the form collapse means this section is set to "Open" by default.

Important note: You can set Form Collapse Status and Visibility to any combination, EXCEPT  [Status: Closed] and [Visibility: Hidden]. Such configuration would just not make sense ;)


2. End your section using yet another Form Collapse

A Form Collapse encompasses all succeeding fields, except another Form Collapse. Unless your form section is followed by another one (i.e., multiple consecutive sections), you will need to place a stopper to end this section.

We can accomplish this by adding another Form Collapse that is configured as [Status: Open] and [Visibility:Hidden]



3. Add a condition to hide or show a section 

Now that your form sections are defined, you can start adding rules to the Conditions builder. 

a. Simply click the "Conditions" button


b. Select "SHOW / HIDE FIELD" .


You may then formulate your conditions to hide or show the corresponding (form collapse) section. Check out the sample forms below and feel free to clone them to your account to learn how exactly this solution was implemented.

Here's a simple for that shows each section for a guest depending on the number of guest entered: https://form.jotform.com/53531501583955 

c. First, I setup the rules or the "IF" statement to when the action will be triggered. 


d. I will choose "Show Multiple" in this case to display the form collapse tool for "Guest 1", "Guest 2" and "Guest 3".

Important note: It is best to use the same "DO" statements on a form field that is related to multiple conditions In my case, I will use "Show Multiple" on all form collapse tools. To select more than one field to show, press CTRL+Mouse click (Left click for Windows)


Repeat the same process on how to add the condition for "Guest 2" and "Guest 3". 


This is how the list of my conditions looked like for all the "Guest" sections that uses the form collapse tool:



This simple form hides the Previous Employment Details section when the user chooses "Yes" in the question "Previously Employed"?





As always, feel free to ask for assistance via the JotForm Support Forum if you encounter difficulties while implementing this solution.


10 Comments...


   
silverboxcreative (September 09, 2014 at 11:08 AM)

Hello, I have two sections in my form and want to apply conditions.

If they select a one hour option I want to show one hour section. If they select 20 minute option I want to show 20 minute option. I've only been successful adding one condition. When I apply the second all conditions fail. Thank you!

View Answer


   
chediski (February 09, 2015 at 08:01 AM)

Any way I can customize the form collapse field with a graphic instead of text?

View Answer


   
Chris (March 30, 2015 at 08:52 AM)

Hi,
how can I edit a conditional logic I created already ?

thank you Chris

View Answer


   
lisapritchett (June 01, 2015 at 04:36 PM)

I have a multiple choice answer that serves as the basis for which set of questions to answer. As long as you make a selection, it's working fine. But when you first arrive to the form, one of the sections is still showing. I can't figure out what I'm missing. I tried adding it an additional condition of "if X" "is empty" then to hide all of the fields. So that until a selection is made, you can't see any of the choices.

When that didn't work, I tried adding a Form Collapse section and moved all of these fields into this section. I placed a collapse stopper field as well. I give up!

View Answer


   
emucoe (July 24, 2015 at 04:20 PM)

Under "1. Insert a form collapse at the beginning of each section", you have a screen shot with "Page Break" highlighted, not Form Collapse. Is that what you meant?

View Answer


   
cmjohnson35 (October 03, 2015 at 03:41 AM)

Where do I get the Previous Employment option button from I cant seem to find that option when making my own form?

View Answer


   
Paul (October 03, 2015 at 03:56 AM)

Hi, are there any pre built templates for booking a conference? We are looking to build a form where delegates can book their places on certain venues and choose which workshops to attend whilst inputting their details.
It would be a great help if there was something for us to work from.
Thanks in advance! P

View Answer


   
cmjohnson35 (October 03, 2015 at 04:34 AM)

OK I found the option but it will not select one or the other without deselecting the other,
I have to do it manually not like your test form if you select "Yes" then select "No" it will automatically deselect yes and go to no any help would be great thank you

View Answer


   
WBCgroup (May 12, 2016 at 11:38 AM)

My collapse stopper is still visible despite being open and hidden. How can I get it to disappear?

View Answer


   
PSNEmployee (June 07, 2016 at 10:55 AM)

I'm using form collapse so that recipients of this survey can only look at the topics of interest to them. Is there a way to NOT have the submit button under a collapsible section?

View Answer


Send Comment