Hi, I’m using Axure 8 and trying to create a detailed accordion menu. I’ve used dynamic panels, with toggle and push pull. However, I tried using hide if one category level is clicked to show the others but it leaves a big gap so I have taken that out.
Please see my example - I would like when clicking on Category 2, for Category 1 to hide but without leaving a gap like it does at the moment.
Anyone have any tips?
accordion - push pull.rp (200.5 KB)
Hi, Joann.
To address the specific problem you’re having with your prototype; you just need to move your “cat 2” and “cat 2 links” dynamic panels down one pixel. Your cat 1 and cat 2 panels were slightly over lapping so, technically, cat 2 wasn’t “below” cat 1.
In case you ever need more advanced accordions in the future, here’s a few resources I’ve found:
mbc66 has a really good example here: Accordion with button changes
He’s helping out on another issue but it should work for you.
Another great resource is http://dejongh.dk/wiki/doku.php?id=interaction:axure_javascript
He does a lot with JavaScript injection but he also has a lot of “native Axure” examples as well.
These are by no means the only ones; lots of examples have cropped up in the forums over the years, but they should get you started.
I’m not sure why you want to hide the “Category 1” panel (cat 1 dp) when you open “Category 2” (and then why would you not hide “Category 2” when opening “Category 1”?) … What you have on Page 2 works more like a traditional accordion menu.
Nevertheless, the interaction code you have on Home page should hide the cat 1 dp and pull cat 2 and cat 2 links dp’s, which it does not do the first time–but curiously does pull these panels the second time (and every time after that). So it looks like some kind of weird bug. However, it turns out that your cat 2 and cat 2 links dp’s overlap cat 1 by 1 px, so they are not actually and fully below cat 1. See Page 2 of this attached update where I have moved cat 1, cat 2, cat 2 links down 1px each. None of the interaction code was changed. Now when you click on “Category 2” the cat1 dp hides and pulls widgets the way you intend.
accordion - push pull.rp (292.4 KB)
If you don’t want the “double border” between your category titles you can modify the border settings for the rectangle widgets, turning off the top border.
In order to control your list behavior and make this easier to scale and reuse, you would do well to implement this in a repeater list. Ha! I see that @huban has just posted the same thing as I’m typing this reply --great minds think alike …and at the same time. 
Thank you both for looking at my problem, that works great! I was thinking to look at repeater lists next, but have not used them much before
@huban, I believe I am having a similar issue, But I am not sure where I have gone wrong. When you click the continue button in the Account and Business Information accordion, I want that to display the summary, and open the Billing info accordion to have the user fill out that form. I am not sure why I have the large gap? AttachingAccordion.rp (96.2 KB)
my reference file. Any help is greatly appreciated!
Thanks!
Shannon
Hey, @shajmurphy.
I took a look at your project and noticed two things:
Your dynamic panels weren’t set to “Fit to content” which means they are changing size even if the content inside them is smaller. I good way to troubleshoot stuff like that is to set the dynamic panel’s background color to something that really contrasts with the content like red or the like.
The other has to do with what events trigger the push/pull action. When clicking the headers, you’re using the show/hide event on the “content” panels to trigger the push/pull of the widgets below. That’s all good. However, when clicking “Continue”, you’re just changing the state of the “AC Content” panel. Since it’s already visible, the push/pull is never triggered.
To fix it, you need to either set the panel state change to trigger a push/pull or you need to hide the “AC Content” panel, set the panel state, and then show it again. That will trigger the visibility push/pull.
@huban, thank you so much! I understand the first part, but I am not sure I am following the second half?
To fix it, you need to either set the panel state change to trigger a push/pull or you need to hide the “AC Content” panel, set the panel state, and then show it again. That will trigger the visibility push/pull.
Am I setting the panel state change on the Billing Info?
Thanks!
@huban, thank you so much!! I have a gap that now appears between the Account and Billing accordions when the billing opens. They are both dynamic panels so I am not sure why the gap is happening?
Oh! I noticed that too. Sorry I didn’t mention it.
I have no idea why, but the rectangle shape that contains the summary info is “bigger” than it actually looks. I deleted and recreated it and it fixed it for me.
@huban, that did it! Thank you much for all your help, I have been stuck on this for a while!
