Push/pull widgets works with "show/hide", but not with "set panel state" event

Axure RP 11
1

push/pull widgets works with “show/hide”, but not with “set panel state” event
To reproduce -

  1. Put a “rectangle” on the page near the top, and set its text to anything.
  2. Put 3 “dynamic panels” vertically arranged on the page below “rectangle”, each with 2 states, first panel 50px high and second panel 300px high, and any content.
  3. Create “click or tap” action for “rectangle” to “set panel state” of the topmost dynamic panel to its second state.
  4. Observe that the 2 dynamic panels below the first one do not move down when “rectangle” is clicked.
2

I’m guessing you are describing an accordion pattern and you want the accordions to push and pull the elements below them. To do this, instead of Show/Hide with Push/Pull you need to use the Resized interaction and the Move action targetting “All widgets below this”.

  1. You need to have a dynamic panel with Fit to Content checked, it wasn’t clear from your description what it’s set to.
  2. On the dynamic panel that needs to push/pull things, go to the Interactions panel, New > Resized
  3. Add a Move action, in the target dropdown select: “All widgets below This”
  4. Leave Move distance set to “Height change of This”
  5. Click okay.

Now it’ll work and because the interactions don’t have any shape-specific settings because everything targets (or is related to) This, you can easily copy-paste this interaction to all of your accordions.

I’ll note that for a page with only a few accordions this is fine, but too many more and it may become unwieldy to manage and maintain, in that case, I have an alternate way to implement accordions using repeaters.

3

It was setting the dynamic panel “Fit to Content” that was missing. Thank you so much! With that setting, I simply use the dynamic panel interaction “click” to set panel state of “this” to “next” with “push/pull” option. Just 2 settings and it works perfectly :slight_smile: