All Collections
Using Editor
Tips & Tricks
Using Vertical Stacks to Create Progressive Disclosure
Using Vertical Stacks to Create Progressive Disclosure
Progressive Disclosure functionality using the Vertical Stack layout option
Kirsten Stevens avatar
Written by Kirsten Stevens
Updated over a week ago

Vertical stacks are a versatile feature in iRise. You can utilize them to create a variety of different functions and components with ease. This article will go in detail on building out progressive disclosure with vertical stacks. If you need to familiarize yourself with vertical stacks first, please view the article here to get an overview. 

The exercise in this article will focus on the SimBank tutorial project. You can learn more about this project by clicking here

To create a progressive disclosure with vertical stacks, we will need to begin with the vertical stack container. This is the container that will be used to organize all of the items in your progressive disclosure. Create a container with a size that should take up the amount of screen necessary to house all your progressive disclosure displays.

Within the Format > Settings panel of this container, flip the Layout option to Vertical stack.

Now you can create smaller containers within the vertical stack to act as your progressive disclosure displays. You will want to ensure that your Drag Mode is set to Drop Into before creating the containers. The new containers will automatically adjust to the correct position as they are created. Build as many progressive disclosure containers as necessary. 

When you have all the progressive disclosure options created, work on building the body of each progressive disclosure display to help organize the screen. 

When you have fully built out the progressive display, add the functionality that will be used to display the correct disclosure. In this case, we will be using an action sequence with both show and hide actions to toggle the appropriate accordion container.  

First, add a show action to the widget that will display the selected disclosure, then select the container for that specific disclosure. In this case, I will add an action to the radio button for Business Account Type to display the Business disclosures. 

Next, add a hide action to the same action sequence to hide the other disclosures in the stack, ensuring that you will only display one disclosure at a time. 

Now that you have the action, the final step is to set the default visibility of the accordion containers. For containers that should be hidden on default, you can right click > hide them or go into the outline and uncheck the box next to that widget. 

This will set the default visibility so that containers that should be hidden by default will not be shown. When you click on the respective widget for the disclosure you want to see, the disclosure should appear, and any other disclosures that were previously displayed should be gone. 

If you have any questions, feel free to contact us at support@irise.com or check out the support portal at support.irise.com. You can also reach a member of support by using the 'Chat with us' button at the top right of your Definition Center interface. 

Did this answer your question?