How to Show or Hide Multiple Fields Conditionally With Section Collapse

June 24, 2024

The Section Collapse element allows you to group your form fields, split your form into expandable parts, and hide or show sections of your form.

In this example form, a Section Collapse element groups fields together and then shows or hides them based on the form filler’s answer using conditional logic.

Youtube Embed Poster: a3L2jLgd7Vk

To hide or show fields conditionally using Section Collapse

  1. In the Form Builder, insert a Section Collapse element at the beginning of your field set.
A Section Collapse element in Jotform Form Builder
  1. Select the Section Collapse’s gear icon to open properties.
  2. In the properties panel, select Visible under Section Visibility.
Steps to toggle the Section Collapse's visibility in Jotform Form Builder

Here are the available Section Collapse visibility options:

  • Section Visibility — Allows you to set the section and contents to be hidden (collapsed) or visible (expanded) by default when the form loads.
  • Button Visibility — Allows you to hide or show the collapse button or bar for toggling the section contents’ visibility on the form.

Note

A Section Collapse encompasses all succeeding form elements except another Section Collapse.

  1. Insert a Section Collapse element at the end of your field set and apply the following settings:
    • Section Visibility: Visible
    • Button Visibility: Hidden
Steps to toggle the Section Collapse's visibility in Jotform Form Builder
  1. Add a related question for your field set.
An "Include additional information" question in Jotform Form Builder
  1. To set up conditional logic, go to Settings at the top.
  2. Select Conditions on the left, then add a new Show/Hide Field condition.
Steps to add a Show/Hide Field condition in Jotform Form Builder
  1. On the next page, set up your condition rules.
A configuration to conditionally show a Section Collapse in Jotform Form Builder

In this example form, the conditional logic is as follows:

  • IF: Include additional information?
    — A Single Choice element with Yes/No options.
  • STATE: Is Equal To
  • VALUE: Yes
  • DO: Show
  • FIELD: Additional Information
    — A Section Collapse element containing a set of fields.
  1. Once you’re done, select Save at the bottom.
Academy Logo

Introduction to Form Building

Adding Conditional Logic Elements

Go to course :Adding Conditional Logic Elements
lesson-2 - image
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:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Dominik Kędziak - Profile picture
  • Nicole Camins - Profile picture
  • Ryan Metro - Profile picture
  • Clarence Masara - Profile picture
  • formularios cimei - Profile picture
  • Giacomo Corda - Profile picture
  • The Maitland Clinic - Profile picture
  • Dave M! - Profile picture
  • Quality Quick Print - Profile picture