Expand and collapse content with Dynamic Panels in your prototypes
In this tutorial, learn how to expand and collapse content with the Layout Control using dynamic panels in your interactive prototypes.
The Layout Control allows for fluid layout between child objects that are dynamically connected to each other. If one child object is hidden, the objects after it will take its place.
You can download the below example here.
Expanding and collapsing content using dynamic panels
1) In a web prototype, drag a Dynamic panel onto the canvas and go to the Properties tab. Expand the ‘Layout’ group of properties and select the ‘vertical’ layout type. This type of layout forces the elements inside the dynamic panel to always be placed one below the other.
2) Right click on the dynamic panel and select ‘Edit content‘ in order to insert elements into it by using drag & drop.
3) Drag another dynamic panel inside the first dynamic panel: in this new dynamic panel create a second sub-panel, by clicking on the symbol +..
4) Select ‘Edit content‘ in the new dynamic panel and drag one Text widget and an arrow icon inside the first panel. Rename the Text widget as in the example.
5) Change the height of this panel to the minimum height possible, so that the text widgets are still visible.
6) Select the second panel in this same dynamic panel and make it taller that the first, (it will have to contain the content as well). Drag two Text widgets and another arrow icon into it.
7) Go back to the first panel in this dynamic panel, and select the arrow icon that will show the content. Go to the Events tab and click the ‘Add event’ button. Once in the event panel, select the action ‘Set active panel’, the second panel in this dynamic panel as the active one in the outline tab. Click OK.
8) Go to the second panel and select the arrow icon. Add a “Set active panel” event, the panel it is contained in as the active panel. Click OK.
So far you should have a main dynamic panel with a vertical layout and, inside it, another dynamic panel with two sub-panels, the second taller than the first. Also, in each panel you have a text widget that lets the user go from one panel to the other.
9) Now you just need to select the dynamic panel with the two panels using the Outline tab, and select Edit -> Copy from the menu. Then, select the first dynamic panel and select Edit -> Paste.
You should be able to see how the elements are pushed down or up when a panel with a different height is shown. The layout controls the position of the elements when some of them change their height, or are hidden/shown. You can also expand and collapse the content horizontally if you change the layout of the panel.
That’s it! Now you can simulate and enjoy!