Designing a grid with expand and collapse behavior

With Justinmind, you can create an expandable and collapsible grid in your prototypes.
expand collapse grid

How to create an expandible and collapsible grid

Follow the steps below to create an expandable and collapsible grid:

  1. Create a new web prototype. From the Outline palette, select the screen.
    • Go to the Properties palette and resize the screen to 870 x 950 pixels.
    • resize properties palette
  2. Drag a Dynamic Panel to the canvas, resize it to 870 x 950 pixels and position it in the center of the canvas.
    • dynamic panel resize
  3. Double click on the Dynamic Panel to edit its contents and add two Text widgets.
    • Place one in the top left-hand corner and the other in the right. In the top right-hand Text element, write “Collapse”. In the left, give your grid a title. In ours we’ve written “Select your destination”.
    • collapse text element
  4. Now, drag a second Dynamic Panel to the canvas, place it inside the first and resize it to 764 x 800 pixels. Center it inside the first Dynamic Panel.
    • place inside dynamic panel
  5. With the second Dynamic Panel selected, go to the “Layout” options in the Properties palette. Change the layout to “Horizontal Layout” and change both the vertical and horizontal spacing to 33 pixels.
    • horizontal layout
  6. Then in the “General” section of the Properties palette, change the “Horizontal Overflow” to “Wrap”. This will ensure that upon collapsing your grid, the elements inside it will wrap around the grid.
    • general wrap
  7. Next, we’ll create the grid items. Drag an Image and a Text widget to the canvas.
    • Double click the Image and choose an image to represent a grid item. Click “Open”.
    • In the Text element, write a name that represents the Image and place the Text element below the Image.
    • Then, select both the Image and Text element, right click on the selection and select “Group in dynamic panel”.
    • create grid items
  8. Place this Dynamic Panel group inside the second Dynamic Panel.
    • dynamic panel inside
  9. Go to the Outline palette. Right click on the third Dynamic Panel from within the second Dynamic Panel and duplicate it for as many grid items as you need (we have nine in our example). To do so, click “Duplicate”.
    • Customize the content inside each additional dynamic panel grid item as preferred.
    • duplicate and customize
  10. Select the “Collapse” Text element and go to the Events palette.
    • Click “Add Event” and add an “On Toggle” + “Resize” event, selecting Panel 2 from the second Dynamic Panel.
    • Below, change the Width to 530 pixels. Select “swing” from the “Easing” drop-down and enter “300” in the “Duration (ms)” input field. Click “OK”.
  11. Back in the Events palette, click on the gear icon next to the word “Do” and select the “Add action” option.
    • Add another “On Toggle” + “Resize” event, selecting Panel 1 from the first dynamic panel.
    • Below, change the Width to 568 pixels. Click OK.
  12. Now add another action, as before. This will be an “On Toggle” + “Move” event. Select the “Collapse” Text element.
    • Below, change the Width to 667 pixels. Click OK.
  13. Add a final action. This will be an “On Toggle” + “Set Value” event. Select the “Collapse” Text element.
    • Below, leave the value as “Fixed” and enter the word “Expand” in the input text field. Click “OK”.
  14. Click “Simulate” to view and interact with your expandable and collapsible grid. Click on the “Expand”/“Collapse” links to see the grid items shift as the page expands/collapses.

You can download our example here.