Designing a grid with expand and collapse behavior
With Justinmind, you can create an expandable and collapsible grid in your prototypes.
Follow the steps below to learn how:
- Create a new web prototype. From the Outline palette, select the base screen. Go to the Properties palette and resize the screen to 870 x 950 pixels.
- Drag a Dynamic Panel to the Canvas, resize it to 870 x 950 pixels and position it in the center of the Canvas.
- Double click on the Dynamic Panel to edit its contents and add two Text widgets. Place one in the top left corner and the other in the right. Write “Collapse” in the top right Text element. In the left, write a title for the grid. In ours, we’ve written “Select your destination”.
- 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.
- 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.
- 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 will wrap around the grid.
- Next, we’ll create the grid items. Drag an Image and a Text widget to the Canvas, placing 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”.
- Place this Dynamic Panel group inside the second Dynamic Panel.
- 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.
- 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 as the element to be resized. Resize its width to 530 pixels, and give it a “swing” easing effect of 300ms.
- 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 as the element to be resized. Change the Width to 568 pixels.
- Now add another action and create an “On Toggle” + “Move” event, selecting the “Collapse” Text element as the element to be moved. Below, change the X (horizontal) position to 543 pixels. Click OK.
- Add a final action – an “On Toggle” + “Set Value” event. Select the “Collapse” Text element as the target of the “Set Value” action”. For the value, type in “Expand” in the input text field.
- 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.