The Section Collapse element can hide or show sections of your form and also splits your form into expandable parts.
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.
- Add the fields to your form then insert a Section Collapse element at the beginning of the fieldset.
Let’s call it the “Additional Information” section.
- Set the Section Collapse element’s visibility to Visible.
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.
A Section Collapse encompasses all succeeding form elements, except another Section Collapse.
- Insert Section Collapse element at the end of the fieldset. Set its Section Visibility to “Visible” and Button Visibility to “Hidden”.
This will act as the stopper or the section’s end.
- Add a trigger question for the Conditional Logic to show or hide the section.
Next is to set up the Conditional Logic.
- Go to the Settings tab.
- Click Conditions on the left.
- Add a new condition and select the Show/Hide Field option.
- Set up the condition and action in the next window. In our example form, the conditional logic would be as follows:
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.
- 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.