Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create an expandable and collapsible grid in your web wireframes

Learn how to create an expandable and collapsible grid in your web wireframes with the help of this tutorial.

In this release, we updated our UI features so that users can now change the spacing between elements on the canvas, as well as wrap elements around other elements and/or UI content. Read on to see how you can create an expandable and collapsible grid in your web wireframes, using the interactive UI elements.

You can download the below example here.

expand-collapse-cells

Creating an expandable and collapsible grid in your web wireframes

1. Create a new web prototype and resize the screen to 870 x 768 px in the Properties tab.

2. Drag a dynamic panel to the canvas, resize it to 757 x 709 px and place it in the center of the screen.

3. Right click on the dynamic panel to edit its contents and add two text boxes: one in the top right-hand corner and the other in the left. In the top right-hand text box, write ‘Collapse’. In the left, give your grid a, instructive name for users, (in ours we’ve written ‘Select your destination).

4. Now, drag a second dynamic panel to the canvas, place it inside the first and resize it to 700 x 550 px. This will serve as the grid structure. From the Layout section of the Properties tab, change the layout to horizontal and change both the vertical and horizontal spacing to 14. Then in the General section of the Properties tab, change the horizontal overflow to ‘Wrap’. This will ensure that upon collapsing your grid, the elements inside it will wrap.

web-wireframe-properties

Important: you must change these settings in the Properties tab to ensure that your expandable and collapsible grid works properly.

5. Next, we’ll create the grid items. Drag an image widget and a text widget to one side of the canvas. Add an image to represent the first of your grid items and give it a name, by writing it in the text box.

Tip: choose the ‘multiple line’ option in the General Properties tab Type drop-down to enter text on multiple lines.

6. Now, group them together inside a dynamic panel, (either by dragging another dynamic panel to the canvas from the Widgets library or right clicking> Group in dynamic panels), and place inside the second dynamic panel.

web-wireframe-composition-ui-elements-widgets

web-wireframe-dynamic-panels-formula

7. Right click on this third dynamic panel from within the dynamic panel and duplicate it for as many grid items as you need (we have 9 in our example).

web-wireframe-duplicate-ui-elements

8. Finally, customize the content inside the additional grid items as desired.

Adding events to make your prototype interactive

Now we’ll add events to our grid so that we can expand and collapse it.

  • From the Outline tab, select the text box that reads ‘Collapse’ and go to the Events tab. Add an “On Toggle” + “Resize” event, selecting Panel 2 from the second dynamic panel that you created. Below, change the width position to fixed; 530 px and the height to 550 px. Add a swing ease effect at 300 ms. Click OK.

web-wireframe-resize

  • Right click on this event and choose the option ‘Add action after selected’ and add another “On Toggle” + “Resize” event, this time selecting Panel 1 from the first dynamic panel. Below, change the width position to fixed; 580 px and the height to 707 px. Click OK.
  • Now add another event in the same way as before. This will be an “On Toggle” + “Move” event. Select the ‘Collapse’ text box. Below, change the width position to fixed; 488 px and the height to 54 px. Click OK.
  • Finally, add another event as before. This will be an “On Toggle” + “Set Value” event. Select the ‘Collapse’ text box once again. Below, leave the value as ‘fixed’ and type the word ‘Expand’ into the input text field. Click OK.
  • Change all the links between the events to ‘WITH previous’.

web-wireframe-events

And that’s it! Click ‘Simulate‘ to view and interact with your expandable and collapsible grid. Click on the ‘Collapse’ / ‘Expand’ link in the top right-hand corner to see the elements shift as the page collapses / expands.

 

Next tutorial> Simulate a slideshow in your interactive wireframes