Move a menu widget down the screen and then back up again?

I have a drop down menu with main sections and each main section has subsections within it.
Menu 1
sub 1
sub 2
sub 3
Menu 2
sub 1
sub 2

When the page loads the menus are collapsed. You only see

Menu 1 >
Menu 2 >

What I want is when a user clicks on Menu 1 it expands to reveal its subsections AND pushes Menu 2 beneath it. When the user clicks on Menu 1 again it contracts and Menu 2 returns to its original position.

I have nested dynamic panels for each main menu but when I choose the interaction “move” for Menu 1 and tell it to move Menu 2 100 pixels down screen (y), and then the user clicks on Menu 1, the subsections appear but it keeps pushing Menu 2 down screen 100 pixels every time Menu 1 is clicked. I only want Menu 2 to move below Menu 1 and then move back after the user clicks Menu 1 again (and it collapses the subsections).

Does that make sense? Any help that can be provided would be greatly appreciated. Thanks!

You might be trying to make this more complicated than needs be. See this Axure tutorial for building an accordion menu:

If this doesn’t help you, could you upload your .rp file so forum users can see how you’ve set this up? It would help us help you much more efficiently. Without seeing your .rp file, I can suggest only generic help… Double-check your interaction code so that for every “Move down” action there is a corresponding “Move up” action. Also, try to place all the “Move” actions to the dynamic panels’ Panel State Changed event to make it more likely to move the other widgets in the correct direction.