# How to Toggle a Reply Panel Using Assignment Interaction

## Overview

Learn how to create a dynamic **Show/Hide reply container** using the [**Assignment interaction**](/dynamic-components/component-builder/interactions/variable-operations/assignment.md) in the Avonni Dynamic Components App. This example demonstrates how to manage component state declaratively.

***

## Objective

Build a UI where:

* Clicking a **Reply** button displays a panel with input fields.
* Clicking a **Close** icon inside the panel hides it again.
* The panel visibility is managed using a **Boolean variable** and two **Assignment interactions**.

***

## Step-by-Step Instructions

### 1. Create a Boolean Variable for State

In the **Resources panel**:

* **Variable Type**: Boolean
* **API Name**: `isReplying`
* **Initial Value**: `false`

> This variable controls whether the reply panel is visible.

<figure><img src="/files/7luTiyyNuzPUAJ13duHQ" alt=""><figcaption></figcaption></figure>

***

### 2. Add the Reply Container

* Drag a **Container component** onto the canvas.
* Inside the container, add components like a **Text Area** to compose a reply.

This container will be shown or hidden based on the value of `isReplying`.

***

### 3. Add the "Reply" Button

* Place an **Avonni Button component** outside the container.
* **Label**: `Reply`

**Interaction Configuration (On Click):**

* **Action Type**: Assignment
* **Variable**: `{!isReplying}`
* **Operator**: `equal`
* **Value**: `true`

> Clicking the button sets `isReplying` to `true`, which will display the reply panel.

<figure><img src="/files/XJleGdSGEyO3DCvakSRG" alt=""><figcaption></figcaption></figure>

***

### 4. Add the "Close" Icon Inside the Container

* Drag an **Icon component** into the reply container.
* **Icon**: `utility:close` or `utility:delete`

**Interaction Configuration (On Click):**

* **Action Type**: Assignment
* **Variable**: `{!isReplying}`
* **Operator**: `equal`
* **Value**: `false`

> Clicking the icon resets the variable, hiding the container again.

<figure><img src="/files/PERrgOxu4EsiDRpEUXn4" alt=""><figcaption></figcaption></figure>

***

### 5. Set the Container Visibility Rule

* Select the **Container component**.
* Open the **Set Component Visibility** settings.
* Add a condition:\
  **Show when** `isReplying` is **equal to** `true`.

<figure><img src="/files/CEcbFXDf8rBoOCuGOoPA" alt=""><figcaption></figcaption></figure>

***

## Result

* When the page loads, `isReplying` is `false`, so the reply container is hidden.
* Clicking the **Reply** button sets `isReplying` to `true`, making the container appear.
* Clicking the **Close** icon sets it back to `false`, hiding it again.

<figure><img src="/files/Z1tE0lhLywMDLpbu5tOP" alt=""><figcaption></figcaption></figure>

All of this logic is handled **declaratively** with just two Assignment interactions—no custom code required


---

# 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.avonnicomponents.com/dynamic-components/tutorials/interactions/panel-and-visibility/how-to-toggle-a-reply-panel-using-assignment-interaction.md?ask=<question>
```

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.