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.
Hi Team Jotform i need help, if I embed the element "Collapse" in the site page it doesn't go back to the first question of the section. It remains on the last of the collapsed section. Is there anything I can do
Is it possible to create series of section collapses within one main section collapse? i.e. Can I create one large section collapse as "FAQs" which opens up if FAQ is clicked... but then have a list of FAQ titles within that section that only display each answer in turn when each FAQ title is clicked?
Does this work for toggling paragraphs as well?
Does HIDING (collapsing) a SECTION also turn off all REQUIRED fields within that section?
In other words, If a checkbox has Required * as default status, will closing the Section remove this required default since the User would not see or have access to the checkbox in the closed section?