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

October 21, 2022

The Section Collapse element can hide or show sections of your form and also splits your form into expandable parts.

form-section-collapse-min.gif
https://www.jotform.com/221364464974463

In this guide, we’ll create a form utilizing the Section Collapse element to group fields and then show or hide them based on the user’s answer using conditional logic. Let’s start.

  1. Add the fields to your form then insert a Section Collapse element at the beginning of the fieldset.
form-builder-section-collapse-min.png

Let’s call it the “Additional Information” section.

  1. Set the Section Collapse element’s visibility to Visible.
form-builder-section-collapse-visible-min.png

There are two important Section Collapse properties:

  • 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 used to manually toggle the section contents’ visibility on the form.

Note

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

  1. Insert Section Collapse element at the end of the fieldset. Set its Section Visibility to “Visible” and Button Visibility to “Hidden”.
form-builder-section-collapse-end-min.png

This will act as the stopper or the section’s end.

  1. Add a trigger question for the Conditional Logic to show or hide the section.
form-builder-include-additional-info-min.png

Next is to set up the Conditional Logic.

  1. Go to the Settings tab.
  2. Click Conditions on the left.
  3. Add a new condition and select the Show/Hide Field option.
form-builder-show-hide-field-min.png
  1. Set up the condition and action in the next window. In our example form, the conditional logic would be as follows:
form-builder-include-additional-info-condition-min.png

To break that down:

  • We’ve set the condition or IF statement to check if the “Include additional information?” question is equal to “Yes”
  • The action or DO statement will show the “Additional Information” section if the condition is met.
  1. Click the Save button to save the changes.

Here’s the demo form with the setup above applied: https://www.jotform.com/221372671575459

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

Was this guide helpful?
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:

  • Dave M!
  • Quality Quick Print