4.4 Accordion

The Accordion element is handy to use for toggling the display of groups of elements. You can place various elements inside it and use the Label field as a button to hide or show these elements.

In the example below, we have placed information regarding a company inside the Accordion element “Company” and selected Collapsed as the initial state of the Accordion:

This Accordion element and the two below it look like this when the form is opened:

When we click/press anywhere on the bar containing the name “Company”, the group of elements in it opens up. After typing in the company name, it immediately appears in the accordion bar above. This is due to the code {#company_name} we typed in the Accordion label (see the top picture).

After these fields have been filled in, we can click on the bar again to close the accordion. The information is still registered in the form and you can at any time click on the title bar to see it and change it. We have also added code to show the name of the contact person. See the Accordion element Contact Person in the top picture.

For more information on the codes to put in the Label property, see Designing: 6.4 Description Formula.