Expandable/collapsable box

If you check my .RP and click on the tiny arrow …the box will expand how I want it, but I don’t get how to collapse it with a slide up effect.

Can somebody help me please. Is there a better approach…I’m exhausted and don’t get it. Is there a way to use the animate in and animate out states separately?

test.rp (64.1 KB)

Help is appriciated


Here are a few options for doing this a little differently. When you animate the transition of a dynamic panel from one state to another you have to think of the entire state being involved in that transition. When the dynamic panel is set to change size dynamically, that size changes immediately when the panel actually changes state. These two factors can often mean the animation doesn’t look the way you’d like or expect.

You can treat the Animate In and Animate Out “separately” in terms of different animation effects, however when changing a dynamic panel state, something has to come in and something has to go out. When you select “none” for Animate Out, then that state disappears immediately. When you select “none” for Animate In, then it is shown immediately. I wish there were an option for “Remain” in which that state would be shown throughout the transition animation (and remain in the background, behind the incoming state)–but alas, that is not an option in Axure RP8. You can choose an Animate Out option of “Fade” and set the timing much longer than the Animate In, which can kind of fake this “remain” option. This is shown on Page 1.

In your case, it looks like you are expanding or adding content in your State 3, causing the area to grow. So, another way to think about this is that two states are not needed, just changing the size of the “Preis” area. Or, it could be thought of as just sliding the Preis area down to display more of its content. That is the approach I took on Page 4. I think this gives a reasonably good animation effect.

How you approach this depends on how much fine control you need over transitional interactions and experiences.

test-v2.rp (167.2 KB)

1 Like

Thank you very much for your example, appreciate it. I will give it a try.