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