All Collections
Using Editor
Tips & Tricks
Using Vertical Stacks to Create an Accordion
Using Vertical Stacks to Create an Accordion
Creating an Accordion with the Vertical Stack container setting
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 an accordion 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 an accordion 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 accordion. Create a container with a size that should take up the amount of screen necessary to house all your accordion items.

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 accordion options. 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 accordion containers as necessary. 

When you have all the accordion options created, work on building the body of each accordion piece to help organize the screen. 

When you have fully built out the accordion, add the functionality that will be used to expand or collapse the accordion. In this case, we will be using a toggle action to toggle the appropriate accordion container. Add the toggle action on click to the widget you want to utilize.

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 widget with the toggle action you should see that the container will expand or collapse to either push the rest of the accordion content down, or pull it up to fill the empty space. . 

If you have any questions, feel free to contact us at or check out the support portal at 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?