Accordion

The Accordion container organizes form content within collapsible panels.

You can add as many panels as you need. To add a new panel, simply click on the plus symbol:

This page contains a detailed description of the container properties and JavaScript samples that you can use with this container.

Accordion properties

These properties let you customize the look and behavior of the Accordion container.

Name

A unique identifier for the container.

JavaScript

The Name property lets you work with the container via JavaScript code, like this:

fd.spRendered(() => {
   // hide container
   fd.container('Container1').hidden = true;;
});

Width

The property defines the width of the container in pixels.

If left blank, the container takes up the entire available width in the current grid cell.

Mode

The property defines the number of panels that can be expanded at a time:

Single — only one panel can be opened at a time.
Multiple — multiple panels can be opened at a time, and all can be closed.

Collapsible

The property is available for the Accordion in Single mode:

When enabled, users can close all panels:

Border

The property defines the panels’ border width and color:

Frame

The property defines the horizontal and vertical padding (extra space) and border radius (roundness) of the panels:

Fill

The property defines the background color of the panels:

Font

Format panel titles using these settings:

Font size:

Font color; use the color picker or enter the Hex color code:

Font style: Normal, Bold or Italic:

Hide

Define one or more rules to hide this form element based on form state. To manage these no-code conditions, click the gear icon.

Disable

Define one or more rules to disable all fields and controls inside this container. To manage these no-code conditions, click the gear icon.

Accordion panel properties

The following properties let you customize specific panels rather than the whole container. To edit these properties, select the panel in the visual editor first:

Title

The property defines the header of the panel.

Expanded

Defines which panel expands on form load.

In Multiple mode, you can set the property to True for multiple panels.

Note

By default, the property is set to False for all panels. However if the Accordion is also in a Single mode and is not Collapsible, the first panel still gets expanded on form load.

Hide

Define one or more rules to hide the Accordion panel. Click the gear icon to manage these no-code conditions.

Disable

Define one or more rules to disable interaction with the Accordion panel. Click the gear icon to manage these no-code conditions.

JavaScript framework

In this section, you can find basic examples of how to work with the containers using JavaScript.

If you are not familiar with the JavaScript framework, get started with the JavaScript basics.

Note

The container is only accessible once the form is rendered, so all calls to the containers must be inside fd.spRendered event:

fd.spRendered(() => {
    // hide the container
    fd.container('Container1').hidden = true;
    // show the container
    fd.container('Container1').hidden = false;
});

Get HTML element

Access HTML element inside the container.

// access container's HTML
let htmlcontainer = fd.container('Container1').$el;

Hide container

Hide a container from a user.

// hide container
fd.container('Container1').hidden = true;

// show container
fd.container('Container1').hidden = false;

Mode

The property holds the current mode of the Accordion container.

Available modes:

One — Single mode, one panel is always open.
ZeroOrOne — SingleCollapsable mode; only one panel can be open, but it can also be closed.
ZeroOrMultiple — Multiple mode; multiple panels can be open, and all can be closed.

To change the Accordion mode dynamically, call the toggle() method after setting a new mode:

// set mode to Single:
fd.container('Container1').mode = 'One';
// open the first panel:
fd.container('Container1').$children[0].toggle();

Accordion panels

The property holds Accordion panels as an array of objects. Use it to access panels and their methods.

fd.container('Container1').$children;

Change panel header

Get or set the panel header.

// returns the first panel header as a string
fd.container('Container1').$children[0].header;

// change the second panel header
fd.container('Container1').$children[1].header = 'New Header';

Disable panel

Disable or enable a panel:

// disable the second panel
fd.container('Container1').$children[1].disabled = true;

// enable the second panel
fd.container('Container1').$children[1].disabled = false;

Hide panel

Hide or show a panel:

// hide the second panel
fd.container('Container1').$children[1].$el.hidden = true;

// show the second panel
fd.container('Container1').$children[1].$el.hidden = false;

Open/Close panel

Check if the panel is open or closed. Returns a boolean.

You can also use it to open or close a panel, ignoring the current mode of the Accordion.

// returns true if a panel is open; false if closed
fd.container('Container1').$children[0].open;

// open the first panel
fd.container('Container1').$children[0].open = true;

// close the second panel
fd.container('Container1').$children[0].open = false;

Toggle between panels

Toggle the panel state between open and closed. This method honors the current Accordion mode.

// toggles the second panel from one state to another
fd.container('Container1').$children[1].toggle();

// opens the first panel if it is closed
if (fd.container('Container1').$children[0].open === false){
    fd.container('Container1').$children[0].toggle();
}