# Collapsible Area Action in Data Design

{% hint style="info" %}
**Block Information**

Available in: Page Flow

Toolbox Category: Dynamic Action

Block Type: [Regular](https://docs.zingy.ai/app-editor/block-anatomy#regular-block)
{% endhint %}

**`Collapsible Area Action in Data Design`** is a [regular block](https://docs.zingy.ai/app-editor/block-anatomy#regular-block) that allows you trigger the expansion or collapse of a [Collapsible Area](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/collapsible-area) elements that were generated using the [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block and dynamically added to the page or form.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Flt3HJpzuSgCx4lDIS5wp%2Fimage.png?alt=media&#x26;token=f85333e6-b7fa-4028-80ec-190c8d7af8ff" alt="" width="286"><figcaption><p>Collapsible Area Action in Data Design block</p></figcaption></figure></div>

The behavior of the block is similar to the [Collapsible Area Action](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/collapsible-area-action) block, with some important differences:

* Works only with elements generated using [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block that are dynamically added.
* Element Selection: You can only choose an element placed inside the selected [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element.

The block consists of the following (from top to bottom):

* *Data Design*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element whose element you want to target.
* *Action*: [Dropdown configuration setting](https://docs.zingy.ai/app-editor/block-anatomy#dropdown) that allows you to choose from three options:
  1. Expand: Expands the element.
  2. Collapse: Collapses the element.
  3. Toggle: Toggles the state of the element i.e. collapses it if it is expanded and vice-versa.
* *Element*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the [Collapsible Area](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/collapsible-area) element, within the selected [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design).
* *ID*: Optional [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing the unique value that was provided to the [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block. See below for more details.
* *ID2*: Optional [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing the secondary identifier that can be used to identify the desired element. See below for more details.

***

## ID and ID2 usage

The behavior of this block depends on the ID and ID2 [value parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) and is detailed below:

* ID and ID2 not provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element.
* ID2 provided and ID not provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element with the same ID2 value.
* ID provided and ID2 not provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element with the same ID value. Since we recommend the ID value to be unique, this would choose one from all the generated instances of the associated [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element.
* ID and ID2 provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element with the same ID  and ID2 value.&#x20;

***

## Usage Examples

The image below shows an example where the [**`Event Action in Data Design`**](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/event-action-in-data-design) block is used to handle the *click* event for the [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) element (*Button79*, labelled with a Down Arrow icon).

The **`Collapsible Area Action in Data Design`** block is then used to toggle the  [Collapsible Area](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/collapsible-area) element (*CollapsibleArea6*) of the associated generated instance of the [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) (*DataDesign8*).

The [id and id2 properties](https://docs.zingy.ai/app-editor/page-flow/event-action-in-data-design#event-information) of the [Action/Event Info](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/action-event-info) block are used to determine the associated instance and are passed as the *ID* and *ID2* [value parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) for the **`Collapsible Area Action in Data Design`** block.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FjzBxbaAKbdaUp9Onw5Y7%2Fimage.png?alt=media&#x26;token=3a806c1c-4a1a-4ac5-ada6-86c79adcf9eb" alt=""><figcaption><p>Collapsible Area Action in Data Design block example 1</p></figcaption></figure>

Clicking on the [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) element (*Button79*, labelled with a Down Arrow icon) of a specific company, results in the associated [Collapsible Area](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/collapsible-area) element (*CollapsibleArea6*) to expand or close (based on it's current expanded state).

In the second example, we will illustrate the scenario where neither ID nor ID2 are provided. Additionally in this example we are setting the *Action* [Dropdown configuration setting](https://docs.zingy.ai/app-editor/block-anatomy#dropdown) to *Expand*, which will expand the selected [Collapsible Area](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/collapsible-area) element (*CollapsibleArea6*) for all generated instances.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FaDekmaD12FanzSGJTdOl%2Fimage.png?alt=media&#x26;token=a2241d4c-d7cb-472e-8202-8fa30ccccac2" alt="" width="511"><figcaption><p>Collapsible Area Action in Data Design block example 2</p></figcaption></figure></div>