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](/app-editor/page-editor/built-in-elements/link.md), [Button](/app-editor/page-editor/built-in-elements/button.md), [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link.md) or [Popup Menu Item](/app-editor/page-editor/built-in-elements/popup-menu-item.md) element:
You need to set the [Link Action](/app-editor/page-editor/built-in-elements/link.md#link-action) or [Button Action](/app-editor/page-editor/built-in-elements/button.md#button-action) setting's value to ***`collapse`***, and specify the Element ID of the collapsible area element in the [Action Target](/app-editor/page-editor/built-in-elements/link.md#action-target) setting. Please note that the Element ID needs to be prefixed with a # character.
* Using [Page Flow](/app-editor/page-flow.md)
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](/app-editor/page-editor/built-in-elements/image.md), [Alert](/app-editor/page-editor/built-in-elements/alert.md), [Badged Text](/app-editor/page-editor/built-in-elements/badged-text.md), [Link](/app-editor/page-editor/built-in-elements/link.md), [Text](/app-editor/page-editor/editing-text.md#text), [Heading](/app-editor/page-editor/editing-text.md#heading), [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area.md), [Button](/app-editor/page-editor/built-in-elements/button.md), etc. However, it's important to note that certain elements may have specific restrictions. For instance, a [Layout Column](/app-editor/page-editor/built-in-elements/layout-column.md) can only be added to a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row.md), adhering to its designated usage.
***
## Options
The [Options tab](/app-editor/page-editor/page-element-settings.md#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.
###
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.zingy.ai/app-editor/page-editor/built-in-elements/collapsible-area.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.