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

April 6, 2023

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

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

In this guide, we’ll create a form using the Section Collapse element to group fields together 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

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

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

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 a 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

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

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

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.

END OF YEAR SALE
Save 50%
ON ANNUAL PLANS
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:

  • Giacomo Corda - Profile picture
  • The Maitland Clinic - Profile picture
  • Dave M! - Profile picture
  • Quality Quick Print - Profile picture