According menu - first time everything work properly but next one something goes wrong

#1

Hi
i Have a problem

My Accordion menu don’t work well - first time (i click every link) everything work properly but next one (I start click from the begining) something goes wrong.
https://oowi68.axshare.com

Maybe someone have idea what is wrong

#2

It looks like the layout of the first accordion item gets messed up sometimes–either a large gap between some child items or overlapping items. I also notice the arrowheads don’t get properly rotated when an accordion parent item is collapsed by clicking on another accordion parent item. Whatever code you have to handle the accordion behavior is not reliable. Hard to say what might be the cause without seeing the code. Could you please upload your .rp file?

Axure has a tutorial on creating accordion menus:

#3

hi :slight_smile:
I was tried to make this accordion menu with this tutorial but then it worked worse then now,
I add file maybe you will see what i do wrong
Thanks for your help,test accordion.rp (61.0 KB)

#4

You are not alone in experiencing problems with the push/pull feature. It is poorly documented and has caused a lot of problems for many users–just search for "push/pull" on this forum to see some examples… As I re-read the Accordion Tutorial I realize it fails to mention some important things, and the structure of your file is different in a few ways. It took a while to find the root problem, which I explain in detail below, for those who care to read it (like maybe @Alyssa_Axure or someone in Axure support.)

After testing several iterations of your example, I think the main difference is this: In the tutorial, the widgets that get shown/hidden are Dynamic Panels (even though these dynamic panels are within groups) but in your file everything is in Groups. Changing all the subcategory groups to dynamic panels fixed the problem. You can see this in Page 4 and Page 5 of this updated .rp file:

test accordion.rp (195.2 KB)

Your structure and interaction code should work but obviously doesn’t. I wouldn’t say you’ve done anything wrong–you’ve just encountered some long-standing bugs in Axure. I’ve found that moving or resizing any widget within a Group is just not reliable, and now I’ll add that push/pull with Groups is not reliable. Dynamic Panels just work better than Groups in general. Also–as several forum users have pointed out in the past–an accordion is a very common UI item and Axure should really have a default Accordion widget that just works. It’s crazy how much effort is required to make an accordion work properly in Axure.

There are a few aspects of push/pull that commonly cause problems, and I tested these to see which might be causing your issues.

  • First, the “target” widgets to be moved cannot overlap vertically–they must be all the way below the widget being shown/hidden.

    • In your file, there does not appear to be any overlap, but there is something a little odd about your text widgets that could have caused an overlap problem. These widgets are 28 px tall with a 14 px font, but the Line height is set to 32 px. If you select a category group you can see the dotted outline is taller than the widgets in the group, and this dotted outline does overlap with the subcategory groups.
    • So, I duplicated your Page 1 to Page 2 and set the text widgets’ Line value to “auto” (and adjusted the padding so the text is still in the same exact position, but no chance for overlap.
    • I honestly thought this would fix the problem, but it had no effect–same gaps show up.

  • Secondly, it is best if the all the widgets involved with push/pull are aligned horizontally, and it works best when all the widgets involved (the groups and dynamic panels in your situation) have the same width and same horizontal location (x-value). Note this is the case in the tutorial file–all widget groups/panels have the same width and horizontal location. It is supposed to work if there is any amount of horizontal overlap, as you have, but sometimes it doesn’t work.

    • I duplicated to Page 3 and set all the text widgets to the same width and x-value.
    • Surely this would fix it! Alas, it did not change anything.
    • However, I did notice something peculiar about the gaps between the widgets in the subcategory groups.
      • If you only click on “category 1” to open and close it, it always works correctly. Same for all the category groups.
      • If you click on “category 2” to open it, then click on “category 1” there is a big gap between the first and second items.
      • If you click on “category 3” to open it, then click on “category 1” there is a big gap between the second and third items. …and so forth.
      • The gaps only occur when you open an item above the currently opened item.
      • Clicking on further category items, then on “category 1” compounds the gaps, and the gaps never disappear until the page is reloaded.
    • I made a set of gray “category markers” to the left of your groups to show their default collapsed/closed position, and I think this helps demonstrate the peculiar–but now predictable–behavior in which some of the widgets in the subcategory groups get pushed/pulled but not others.
    • Maybe this explains the odd phrasing on the Widget Groups documentation page:

With widget groups, the entire group will be pushed or pulled as long as the bounding box for the group falls within the move zone, which is the area below the top-left of the reference widget being shown or hidden.
If a group’s bounding box is not within the move zone, then the whole group will not be pushed or pulled. Instead, only individual widgets within the group that are in the move zone will be pushed or pulled.

So, there you go. Clearly, your problem is because the bounding box for your widget groups did not fall completely within the move zone.

Wait, what!? :thinking: :roll_eyes:
I can’t imagine anyone ever expecting or wanting that behavior. I think it really just means,
"If you push/pull a Group it probably won’t work correctly."
Some might even call it a bug.

On Page 4, I converted all your subcategory groups to dynamic panels. Your accordion now works correctly and I never see any gaps.

On Page 5 I made some simplifications to the interaction code, so the arrowhead rotation works properly and the accordion list is more extensible–so adding and removing categories later on won’t require changing the code on all the other category widgets. Here’s how it works:

  • Clicking on a category group has only one action: it toggles its selection state.
    • I changed the “kategorie” selection group from the individual widgets to the group itself. In this way, only one category can be selected at a time. When one is selected, all the others are automatically unselected.
    • Within each category group, the text widget has one event: Selected or Unselected with one action: it toggles the visibility of the child subcategory–with push/pull widgets below.
      • In this way, each category only has to take care of itself and its own subcategory, instead of trying to hide all the other subcategories.
    • Within each category group, the arrowhead (e.g., “1 show”) has one event: Selected or Unselected with one action: it rotates itself 180°
      • In this way, it will rotate even when another category is clicked, thus matching the category’s state of Selected (open) or Unselected (closed.)
  • So, clicking on “another” category will change that category’s selection state to Selected, which automatically sets the currently selected category to Unselected, which automatically hides its subcategory and pulls all widgets below it (…and rotates its arrow back to default, pointing down.)
#5

Thanks a lot, now it’s work, so i see i need to learn a lot about axure, this is a powerful tool but not so simple to learn. I have one more question. I plan to add for each subcategory different content. Better is add this content on the same page in dynamics panel or add new page for each subcategory and menu and header make a master? And one more, there is also possible show different states for loged user and no loged user?

#7

Either approach can work. It depends on the purpose of the prototype and what you are trying to convey. For example, is this primarily for a desktop website, mobile site, mobile app, something else? Will the content live on different pages–where page loads should be replicated, or will page loads be problematic? Is the prototype for demonstration, user testing, specification for developers, or something else? How much information do you need to include? Maybe you only need to make a few categories and subcategories work and the rest don’t do anything. Or maybe you are testing with users who might click anywhere and/or developers who need to see all the details of everything, so it all needs to be functional. It also depends on your personal preference and skill set, how much time you have to create it, et cetera.

In general, if you create it all on one page with dynamic panels and panel states, it should perform better for demonstration and user testing because there won’t be page loads between every click–although the initial page load might take longer. However, things can get more complex when everything on one page–so can be harder to edit and troubleshoot.

If you create each category and/or subcategory on its own page, it is usually easier to see and understand the “site map”, find, edit, and troubleshoot, It can be better for a specification and development testing because unique views or states can be isolated and seen without a lot of extra clicks. However, maintaining the selection state of a master menu across multiple pages can be a problem, and the prototype can have a “clunky” slow feel as there will be more pauses and gaps when the pages load.

Yes, this is possible. So if you have a button labeled, “Sign In” you can use its Click or Tap event to change dynamic panel states, show or hide things, move, resize, link to another page, etc. If you have multiple pages, you will need a global variable to track the logged in state. For example, you could have a global variable named, “LoginVar” --when user is logged in the variable value can be set to “true” or “1” or “logged in” --whatever. Then, using the Page Loaded event, test the value of this variable and handle things accordingly. For example, “If value of LoginVar equals “true” Show XYZ, Set Panel State of Header to “login”, Hide SignInButton …etc.”

#8

I make this prototype primarily for a desktop website and it is for developers and i don’t have a lot of time. First I was planning create each category and subcategory on its own page, because easier to see and understand the “site map” but I ran into a problem quickly (I can’t maintaining the selection state of a master menu across multiple pages). Now i’m create each category and subcategory but even that I have a problem. First I selected Category 1–> Subcategory then i Chose Category 2 and then i back to Category 1 and i see that Subcategory 1 is still selected probably because Category 1 is 1 selection group and Subcategory 1 is 2 selection group, when i set the same selection group for category 1 i subcategory 1 and when I try to selected Subcategory then the box with Subcategory 1 is disappear. There is a chance to made this better?