Collapsible Area

Collapsible Area Element

The Collapsible Area element allows you to hide and show content with a smooth transition. It is commonly used to create collapsible panels, accordions, or toggling content visibility on your app's pages. This element is particularly useful for crafting interactive user interfaces that optimize space usage by displaying or concealing content based on user interactions.

You have multiple options to trigger the expansion or collapse of the element, as outlined below:

• Using a Link, Button, Menubar Item Link or Popup Menu Item element:

  You need to set the Link Action or Button Action setting's value to collapse, and specify the Element ID of the collapsible area element in the Action Target setting. Please note that the Element ID needs to be prefixed with a # character.

• Using Page Flow

  With Page Flow, you have complete flexibility to customize the behavior of the collapsible area. You are not limited to using specific elements as triggers for operating the collapsible area.

By leveraging the Collapsible Area element, you can create dynamic and user-friendly interfaces that enhance content organization and improve user experience.

Within the collapsible area element, you have the freedom to effortlessly drag and drop various elements such as Image, Alert, Badged Text, Link, Text, Heading, Flexible Area, Button, etc. However, it's important to note that certain elements may have specific restrictions. For instance, a Layout Column can only be added to a Layout Row, adhering to its designated usage.

---

Options

The Options tab settings for this element are described below:

Initial State

Specify whether the element is marked as Expanded or Collapsed when your page is loaded.