Accordion with multiple levels - Push/Pull issue

I’m just looking for some advice on how I can fix an issue I am having with an accordion. I’m quite new to Axure RP and am struggling to get my second accordion to push down when the first accordion has been expanded.

As you can see in the screenshot, the expanded content goes beneath the second accordion, instead of pushing it down as I require.

If anyone could please advise where I am going wrong that would be very helpful.

I’ve attached my project file for review.

Thanks in advance,
Shane

Hi Shane,

Welcome to the forums!

First, I’d recommend breaking away the inner dynamic panel that’s nested inside the parent dynamic panel, as the inner container is unnecessary. Once you go inside the “Accordion 1 Menu” dynamic panel, right-click on the inner dynamic panel that’s inside and select “Break Away First State” to remove the container.

Now, widgets inside dynamic panels cannot push widgets that are outside of the dynamic panel, which is the issue you’re running into. Those widgets can only take into account widgets that are inside the dynamic panel and can only push those widgets, and not the widgets outside on the parent page.

To work around this, though, we can use a “sandwiching” method where we first hide the outer dynamic panel, toggle the content inside the dynamic panel, and then show the outer dynamic panel again. Doing so will resize the outer dynamic panel (Accordion 1 Menu) to take into account the widget inside the DP that is being shown/pushed. Here’s an example of how that interaction would look like in the Case Editor for the 1a menu:

OnClick
Hide Accordion 1 Menu pull widgets below
Toggle 1a Content push/pull widgets below
Show Accordion 1 Menu push widgets below

Adding the same sandwiching method to the other two menus (1b, 1c) should show their corresponding accordions while pushing/pulling the widgets outside the dynamic panel.

I’ve edited your file to demonstrate this. Hope it helps!
Multiple Accordion_EDIT.rp (80 KB)

5 Likes

Hi Jane

Kindly asking you to help me with similar problem.
Somehow Axure adds weird margin to before next accordion menu that is pushed down by toggling.

Heres the link and file https://qolc1h.axshare.com
Submenu - lvl3.rp (102.2 KB)

Please, help !

Hi -
If you switch the order of the onClick event actions AND apply the push/pull to the first action, it should work.
See updated file below. Hope it helps :slight_smile:
TG

Submenu - lvl3–UPDATE_v1.rp (102.4 KB)

2 Likes

Your example, it was very useful,
greetings from Lima Peru

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.