> For the complete documentation index, see [llms.txt](https://mobsted-2.gitbook.io/knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mobsted-2.gitbook.io/knowledge-base/basics/introduction/hide_show_screen_elements.md).

# How to hide / show screen elements

Mobsted platform allows to conditionally hide/show elements on the screen. For instance:

* dynamic forms with question branches and screen elements varying basing on user behavior [\[Step by step example →\]](/knowledge-base/basics/introduction/hide_show_screen_elements.md)
* UI / UX elements visually changing their style and content depending on previous user actions [\[Step by step example → \]](/knowledge-base/basics/introduction/hide_show_screen_elements.md#visually-changing-ui-ux-elements)

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### DYNAMIC FEEDBACK FORM

Here we have a feedback form. We show the second question depending on the answer to the first one, using conditional visibility. As you can see, only first two selections show the second question.

**Application user view:**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/uxp0kjy3sq/1555412149025/ezgif-com-video-to-gif-8.gif)

**How to set it up:**

1. Drag and Drop [**Text**](/knowledge-base/references/intro-placeholder/constructor_elements.md#text) element to the device screen emulator
2.  Fill in it's **Text** field with *How was your first experience with Mobsted?*
3. Drag and Drop [**Radio Buttons**](/knowledge-base/references/intro-placeholder/constructor_elements.md#radio-button) element
4. Set its' **Backendname** to *Experience*
5. Add new lines of choices for **Radio Button** and fill in labels (what's shown) and values (if selected):

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/uxp0kjy3sq/1555479438768/screen-shot-2019-04-17-at-10-35-25-am.png)

1. Drag and drop another **Text** element below **Radio Buttons** element
2. Fill in its' **Text** field with *What did you like the most?*
3. Below **Text** element - drag and drop **Checkboxes** element
4. Set its' **Backendname** to *Experience*
5. Set up its' visibility condition:
   1. Check **Hidden** box (a default state) in **Visibility**
   2.  Set reference to the above Radio Button's value in **Show conditions**
      1.  \#Backendname;Experience# = **Excellent** OR **Good**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/uxp0kjy3sq/1559547443123/screen-shot-2019-06-03-at-10-36-38-am.png)

1. Click **Save Screen**
2. Click **Preview** button and check your work.

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### VISUALLY CHANGING UI / UX ELEMENTS

In another example - Pizza delivery app has two options for delivery: Express and Regular. Using Variables, we show / hide the buttons with delivery options.

**Application user view:**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/uxp0kjy3sq/1555482796863/ezgif-com-video-to-gif-9.gif)

**How to set it up:**

1. Drag and drop [**Text**](/knowledge-base/references/intro-placeholder/constructor_elements.md#text) element, fill in **Text** field with *Delivery Option Selected: #Variable:delivery#*.

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/uxp0kjy3sq/1559818746413/screen-shot-2019-04-17-at-11-53-52-am.png)

1. Drag and drop [**Button**](/knowledge-base/references/intro-placeholder/constructor_elements.md#button) element
2. Name it as *Express Delivery*
3. Click **Actions Tab,** choose **Add new action** and choose **Set Variables**
4. Click **Add item** and assign **Variable** with a name *delivery* and value to hold *Express* on button press
5. Set up its' visibility condition:
   1. Check **Hidden** box in **Visibility**
   2.  Set 3 inputs in **Show conditions**:
      1. *#Variable:delivery# ----- != ----- Express*

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/uxp0kjy3sq/1559548489138/screen-shot-2019-06-03-at-10-53-52-am.png)

1. Drag and drop another **Button** element
2. Name it as *Regular Delivery*
3. Click **Actions** **Add new action** and choose **Set Variables**
4. Click **Add item** and assign the same **Variable** *delivery* to hold *Regular on button press*
   1. Set up its' visibility condition:
      1. Check **Hidden** box in **Visibility**
      2.  Set 3 inputs in **Show conditions:**
         1. *"#Variable:delivery#" ----- != ----- "Regular"*

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/uxp0kjy3sq/1559548589066/screen-shot-2019-06-03-at-10-55-31-am.png)

1. Click **Save Screen**
2. Click **Preview** button and check your work.

####

#### MENTIONED ARTICLES

* [Variables](/knowledge-base/references/intro-placeholder/variables.md)
* [Constructor elements](/knowledge-base/references/intro-placeholder/constructor_elements.md)

#### RECOMMENDED ARTICLES

* [Hashtags](/knowledge-base/references/intro-placeholder/hashtags.md)