icon Accordion

The Accordion container organizes form content within horizontally collapsible panels.

Accordion preview

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

Add new panel

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

Accordion Properties

Here you can find properties specifically related to the Accordion container.

Name

A unique identifier for the container.

Name property

JavaScript

The Name property allows to work with the container via JavaScript code, like this:

fd.spRendered(function(){
   //hide container
   fd.container('Accordion1').hidden = true;;
});

Mode

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

  • Single — one panel is always open.

    Single mode

  • SingleCollapsable — only one panel can be open, but it can also be closed.

    SingleCollapsable mode

  • Multiple — multiple panels can be open, and all can be closed.

    Multiple mode

Expanded

The property holds the indexes of the panels that will be expanded by default. Leave it empty if you don’t want any panel to be expanded. Can select multiple panels if Multiple mode is selected, e.g. 0,1,2.

Expanded property

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.

Width property

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(function(){
    //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
var 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, the mode property should be used with the toggle() method:

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

Accordion panels

The property holds panels of the container as an array of objects. Can be used to get 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 & hide 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 = true;

The disabled section can also be hidden with CSS:

.accordion .disabled{
    display: none; /* hide disabled sections */
}

Open/Close panel

The property checks if the panel is open or closed. Returns a boolean.

It can also be used 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

The method that toggles the panel state between open and closed. The method considers 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();
}