Hide Containers Using a Button

You can hide a container using an arrow button to collapse or expand the content. Follow the steps from this page to learn how to do this.

For this example, we will use the Form C template page from UiPath^® Apps.

1. Create a new app in UiPath^® Apps.
2. When asked to select a template for a new page, select Form C.
3. In the sectionHeader1 container, add two icons next to the button:
   • One keyboard_arrow_up icon. Rename it to collapse.
   • One keyboard_arrow_down icon. Rename it to expand.
     
     

     

     
     
4. Create an app variable named content_visibility.
5. Configure the collapse icon.
   1. In the Display > Hidden property of the control, add the following: = Not(content_visibility).
   2. Add a Set Values rule on the Clicked on event.
   3. Add the app variable created at Step 4 in the Items To Set property of the rule, and =false in the Value property.
      
      

      

      
      
6. Configure the expand icon.
   1. In the Display > Hidden property of the control, add the =content_visibility app variable.
   2. Add a Set Values rule on the Clicked on event.
   3. Add the app variable created at Step 4 in the Items To Set property of the rule, and =true in the Value property.
      
      

      

      
      
7. Add a Set Values rule on the formC page.
   1. Add the app variable created at Step 4 in the Items To Set property of the rule, and =true in the Value property.
      
      

      

      
      

If you preview the app, there will be one arrow button in the header of the first container. You can click that button to collapse the content. You can click it again to expand the content.