JotForm User Guide / How to Create Better Forms /

Show or Hide Multiple Fields at Once Using the Section Collapse Field

Show or Hide Multiple Fields at Once Using the Section Collapse Field

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

What is a Section Collapse you ask?

Well, according to this JotForm article about form fields:

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

In this case, we will be using the Section 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 section collapse at the beginning of each groupings you want to separate. 

This will mark the start of the 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.



Section Collapse Properties

There are two important settings here, the "Section Visibility" and the "Button Visibility".

Section Visibility => This allows you to set the collapse field to open or close on default. Open meaning the section or the contents of it is visible. Close meaning the contents are hidden.

Button Visibility => This allows you to show or hide the actual collapse bar or button. Set it to hidden if you don't want the bar/button to be displayed, set it to visible if you want your users to see it. Note that if the button is visible, then your users can open and close the section visibility in the live form. 




An arrow pointing downwards in the section collapse means this section is set to "Open" or "VISIBLE" by default.

In my case, I don't want to display the section collapse button so I set the  button visibility to hidden and then set the section visibility to visible. This is to make my setup cleaner as I will use conditional logic later. 

2. End your section using yet another Section Collapse field.

A Section Collapse encompasses all succeeding fields, except another Section 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 Section Collapse that is configured as [Section: Visible] and [Button: Hidden].




3. Add a condition to hide or show a section.

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



You may then formulate your conditions to hide or show the corresponding section collapses. 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 form that shows each section for a guest depending on the number of guests entered: Below are the steps on how the conditions are setup for the section collapse field.

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


b. I will choose "Show Multiple" in this case to display the section collapse field for "Guest 1", "Guest 2" and "Guest 3", depending on the number of guests added.


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 section collapse fields. To select more than one field to show, press CTRL+Mouse click (Left click for Windows) or Command key+Mouse Click (Mac).

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




d. This is how the list of my conditions looked like for all the "Guest" sections that uses the section collapse field:


 e. Save the changes and test your form. You now have a form with groups divided in section and will only display based on a certain input.


Here's another simple form that 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.

Contact Support:
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Contact JotForm Support:

Send Comment


  • ikman123

    Hi, how can I create sub-collapse section within a collapse heading

  • ellengerhard

    I need to use sections in my form to break up the form and for conditional logic. However, the form submittal results do not include the section heads. Is it possible to include those? My goal is to save the pdf to attach elsewhere so the filled in information is easily available. Since we want to use one for to include multiple categories, we need to pdf to display those section headings. Any guidance you can provide would be a great help. Thanks much.

  • plenaprevencion

    Hola, Saben si hay alguna forma de cambiar el color de fondo del titulo de la sección?
    Es posible poner cada sección de un color diferente?
    Muchas gracias por su atención

  • dmunro123

    The user interface for your "show multiple" is confusing. Consider re-implementing it in a repeating section similar to cognito forms. If I could insert a screenshot I would.

  • axel.industrial

    it would be good to check out the idea of a Repeatable Box, it would save a lot of time, this trick still nice though

  • ziad

    Thankyou for your help, i can find the collapse stopper???

  • ameliebob

    Wow thanks this is just perfect!!

  • JMCGroup

    How make the write inside bigger?


    We have created an incident reporting form, I have then added a new section collapse and have added a 2nd tier reporting level that I only want to give access to a few people. I understand that this is possible, how can I do this please?

  • Yoursimplewebsite

    Is it possible to give the Section Collapse header a different colour when it's visible (uncollapsed) compared to it's colour when it's invisible (collapsed), to make it stand out?

  • Charles

    One this page of your site, there is a word that is not spelled correctly. It is In this sentence I am quoting from the word in brackets [for]the word I believe to be meant as [form]. Here's a simple [for] that shows each section for a guest depending on the number of guests entered: Below are the steps on how the conditions are setup for the section collapse field.

  • Yoursimplewebsite

    Hi. At this stage I'm not interested in the conditional control of a field, but I can't find any other help on the Section Collapse Field to ask this in.

    How do you define the end of the section that is to collapse? At the the moment the whole page of the form collapses, but what if I only want part of the page to collapse?

    What is the purpose of being able to make the button invisible, and therefore unselectable? Is that so you set it to be operated exclusively by the conditional logic?


  • formmobly

    I think the collapsible sections are a great tool. They work just fine, but what is a real pain is the JS animation that comes with them. It's sluggish, unnecessary, could be optional and ultimately makes the tool a bit awkward to work with.

    To be specific, it makes it overall difficult to apply CSS to the element - it is set to work with the fixed height of 60px and would look horrible if I were to override the height with my own rules. Also... if a browser has no support for CSS animations, maybe it'd be better off with no animations whatsoever.

  • Andre_Tropical

    I would like to show sections based on checkbox answers.
    Example: I have checkboxes with clothes (t-shirts, polos, hoodies). If the person choose polos and hoodies, how do I show only these sections.
    As I will have at least 8 products to show, I'll have 8 sections. It's pretty hard to do all the combination for 8 products (56 possible combinations).
    Hope to here from you!

  • Joalfarming

    How do I add or insert a visable section collapse into From elements, payments, purchase oder cart . To inject custom css to have 3 to4 section with headins of product of each catogarie
    large rose heads
    small to meduim heads
    other flowers
    your help need thanks

  • GallerySupportGroup

    I understand this function and this is what I am looking for in my form, however I have maybe up to 50+ sections that I would like to show based on the user input. For example if I choose the number 45 in a field, I would like my form to show 45 sections of the same questions. Therefore, based on this method I would have to set up 50 or so duplicate sections, all with section collapse and separate logic. Quite a long process. Is there no way to duplicate a section on the live form based on a user input? ie so I don't have to input so much data into the form builder on setup.

  • adenachung

    Is there any way to make it so that you can open more than one section at a time? I'm finding that if I open a section, the previously open section automatically collapses. Thanks.

  • Jessica

    I would like to show all fields at once on my form for all users regardless of their response. How can I do this?

  • LindsayRasmussen

    These tutorials would be a lot more helpful if you'd use the correct terminology.

    First, this is called a Section Collapse, not a Form Collapse. Second, when you say 'visibility' and 'status' you really mean 'Section Visibility' and 'Button Visibility'.

    Thus to "end your section" you need to set the Section Visibility to Visible and the Button Visibility to Hidden.

  • usman1205

    how to show the data in a data grid table form from text fields and drop down lists?

  • SOSStLucia

    i have a form with over 100 fields and there are some fields which refuse to show even though I have set conditional logic to show them. I have gone through every single condition set to see if there is something preventing them from being shown. No luck. Any ideas?

  • PSNEmployee

    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?

  • WBCgroup

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

  • cmjohnson35

    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

  • Paul

    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

  • cmjohnson35

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

  • emucoe

    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?

  • lisapritchett

    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!

  • Chris

    how can I edit a conditional logic I created already ?

    thank you Chris

  • chediski

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

  • silverboxcreative

    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!