Collapsible panel

Enables you to expand or collapse a section that contains a number of views.

A collapsible panel can contain other views, such as text boxes or other collapsible panels. When you include more collapsible panels in a group, only one nested panel can be expanded at a time inside its parent, while the other panels are collapsed.

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view.

Screen size
A configuration property that has the Screen Sizes icon The Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
Theme definitions
Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
The appearance configuration properties for Collapsible panel are listed in the following table:
Table 1. Appearance configuration properties for Collapsible panel
Appearance configuration property Description Data type
Color style Specifies a color style for the collapsible panel. The colors correspond to variables in the specified theme. String
Width The Screen Sizes icon Specifies the width of the collapsible panel. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If no unit type is specified, then px is assumed. String
Height The Screen Sizes icon Specifies the height of the collapsible panel in px (pixels) or em units. If no unit type is specified, then px is assumed. String
The behavior configuration properties for Collapsible panel are listed in the following table:
Table 2. Behavior configuration properties for Collapsible panel
Behavior configuration property Description Data type
Initially collapsed Specifies whether the section is collapsed when the page is loaded. Boolean
Panel group name Specifies the name of a group of collapsible panels. Within the same group, only one panel can be expanded at a time, while the other panels are collapsed. String

Example

To create a collapsible section in your UI page, add a Collapsible panel view to the page layout. In the Configuration properties, under Behavior, set the Initially collapsed property to false, and then enter a panel group name, for example G1. Under Appearance, set Color style to Info, Width to 50%, and Height to 0.4em. Save your changes. At run time, the resulting collapsible section is displayed expanded, its header colored in light blue. To collapse the section, click the small minus (-) icon that is displayed in the right upper corner of the section header.

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events.

Collapsible panel has the following types of event handlers:
  • On load: Activated when the page loads. For example:
    if(me.isExpand()){me.collapse();}
  • On expand: Activated when the section is expanded. For example:
    me.setColorStyle("S")

    where "S" (standing for Success) must be defined in "me.setColorStyle("S")".

  • On collapse: Activated when the section is collapsed. For example:
    me.setColorStyle("");${CollapsiblePanel1}.expand()

Depending on the specific event, you can use JavaScript logic to modify the effects of the view. More information on using events with views is found in the topic User-defined events.

Methods

For detailed information on the available methods for Collapsible panel, see the Collapsible panel JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.