The Accordion Controls (Accordion - Start, and Accordion - End) are paired Controls that need to be placed around a group of Fields on a Page. Any Fields contained between the Accordion - Start and Accordion - End are contained within a group, commonly referred to as an "Accordion", that can be shown or hidden by the agent by clicking the visible bar of the Accordion - Start, or by JavaScript by setting the value of the Accordion - Start.

 

This feature is particularly useful for large or complex Page, to hide sets of Fields until they are needed, or for agents who want additional assistance. In this example the Name and Address sections are shown, with the Details section remaining hidden:

 

 

 

The Accordion - Start Field is visible to agents as a simple, stylable bar. The Accordion - End Field is not visible to agents.

 

These Controls are part of the Intermediate Control pack, and will only be available if your System has the appropriate licence.

 

 

Place any Fields to be contained within the Accordion on the Page, and then place an Accordion - Start immediately above and an Accordion - End immediately below the group:

 

 

 

The Accordion is configured via the options for the Accordion - Start Field. The options and style can be configured in the Options tab and Styling tab of the Field Properties, and Validation can be applied if desired.

 

Accordion - Start Fields can be styled in a Stylesheet by referencing the control-accordion-start class.

 

The Accordion - Start Control has two unique options available in its Options tab:

 

 

You can tell whether an Accordion is open or closed in code by checking its value. It has a value of "true" or "false" representing whether it's expanded or not, and you can also set its value to expand or collapse it via JavaScript.

 

 

The Accordion - Start can also be toggled by JavaScript or Update Links. Please see the .click() article for more information and an example regarding using JavaScript.