Note: Nintex Apps data centers are located in West US and Australia (AUS). In-region processing of Nintex Apps data is only available in these regions.

Accordion

A layout component, the Accordion can be used to group other components within sections. each of which can hold other Nintex Apps components. End users can open/expand or close/collapse sections, allowing them to view and interact the components contained within.

The Accordion is a responsive component, adjusting to the size of the screen.

Using the Accordion

Use the Accordion to include multiple "hidden" components that are accessible with a click, reducing page clutter and improving the user's experience. Simply add an Accordion component to the page, then equip it with sections, and fill the sections with components.

Add sections

  • Add new sections by clicking Add section on the Accordion.
    • In the Section properties pane, give the section a heading.
  • Remove sections by clicking on the section, then clicking Remove.
  • Adjust the Accordion properties to style the accordion sections

Add components to sections

Add components by clicking and dragging desired components into an Accordion section. Component properties can then be modified as usual to adjust appearance and behavior.

Component actions

Component actions are available using Run component action.

Open all sections

Opens all closed sections within the selected Accordion.

Close all sections

Closes all open sections within the selected Accordion.

Toggle section

  • Section: Determines which section is toggled open or closed based on the section's unique Id.

Properties

Component properties

  • One panel open at a time: If checked, only one panel of the accordion can be open at a time. If the end user opens a new panel, the previously-opened one closes.

  • Sections initially open: If One panel open at a time is unchecked, builders can determine which panel to open upon page load:

    • First section: Opens the first Accordion section.
    • All sections: Opens all Accordion sections.
    • Determine by section: If selected, opens a new Section property called Initial state ( see below ) to determine the open state of the selected section.
    • None: No Accordion sections are open upon page load.

  • Open panel max height: The height of the component section (minus the section title), measured in pixels, em, rem, percentage, vh, or vw.

  • Icons on right: If checked, each section displays clickable icons that allow the user to expand and collapse the section.

  • Icon style: There are two ways to format the section icons:

    • One icon: A single icon is used to open and close each section. (The selected icon rotates 45° when the section is open.)
      • Icon: Click the field picker to select the icon.
    • Separate icons for open/close:
      • Icon when opened: Use the field picker to select the icon for an opened section.
      • Icon when closed: Use the field picker to select the icon for a closed section.
  • Unique ID ( optional ): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

    Note: 

    To refresh available style variant options, click refresh Refresh style variants.

    This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Margin: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click All.
    • To set margins for each side individually, click Separate.

    Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Standard display logic options are available to display or hide the component or feature.

Nested elements

Section properties

  • Section heading: The text heading for the section. Type in section text, or select a field to use as the header. ( This property accepts merge syntax.)

  • Initial state:

    • Closed: ( Default ) The section is closed upon page load.
    • Open: The section is open upon page load.
    • Determined by open conditions: The section's open/closed state is determined by Display Logic.

Standard display logic options are available to display or hide the component or feature.