Justinmind

SUPPORT

Learn how to prototype web and mobile apps

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.

Expand and collapse content in your prototypes

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. 

dynamic-panel-layout-expand-collapse-content

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.  

expand-and-collapse-content-in-web-or-app-prototypes-dynamic-panels

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. 

expand-and-collapse-content-in-web-or-app-prototypes-dynamic-panel2

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.

expand-and-collapse-content-in-web-or-app-prototypes-events

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.

expand-and-collapse-content-in-web-or-app-prototypes-example

That’s it! Now you can simulate and enjoy!

Next tutorial> Create an expandable and collapsible grid

3 Comments

  1. Irina

    June 16, 2015 at 4:45 pm

    Quisiera entender cómo hacer una lista de selección de elementos y que se vean los que se seleccionan en una tabla de opciones. es decir, que se puedan elegir múltiples elementos de una sola tabla de selección y sólo se vean las elegidas. Gracias

    • Lidia Rodriguez

      July 3, 2015 at 10:05 am

      Hi Irina, you can use the ‘filter’ function on a data list to choose the desired elements.

  2. Nathan

    September 5, 2015 at 5:03 am

    Awesome! Instructions were really great. If you have a grip on Just In Mind then there should be no problem in getting your head around these instructions. Thank you.