Creating a "split view" with two dynamic panels with a draggable middle adjuster that resizes each - what's the best approach?


#1

Hello all,

I’m faced with trying to design a “split view” where there’s content on the left and content on the right. If I wanted to design a middle “separator” that resized each (e.g., drag to the right makes the content on the left larger and the right smaller and vice versa) what’s the best approach?

I’m generally familiar with how drag and drop works in Axure, but resizing two elements simultaneously on drag - I’m not sure where to start.

Has anyone seen an example around or tutorial(s) that might help? Thought this might be a shot in the dark but worth a try.

Thanks!


#2

There was a similar thread last year:

I updated that for RP9 with direct resizing of both panels, and added a variation (intended to be more reliable) and another variation for a “drag to reveal” effect. The first two will resize the content in the dynamic panel (one rectangle widget in each panel) with the dynamic panels set to “Fit to Content” so they will automatically be resized. The third approach only resizes the dynamic panel dimensions, thus revealing more or less content as the slider is dragged–and actually only one panel is resized as it sits in front of the second panel, but the visual effect is that both are resized.

split frame with slider.rp (612.5 KB)