Nested accordions not pushing and pulling widgets

#1

Hello everyone,

I’m having some problems with the push and pull of the widgets when hiding and showing things in my prototype, I attached the axure file so that you can understand better.

By the way I have a structure like this:

  • Accordion 1
    ** Part A
    ** Part B
  • Accordion 2
    ** Part A
    ***list of activities
    ** Part B
    ***list of activities
  • Accordion 3
    ** Part A
    ** Part B

So I need to be able to close and open each parts inside the units (and everything moving accordingly) to show the activities inside and also close and open the unit (and find the parts as I left them when clicking on the unit); all of this with smooth animation, of course :smiley:

In the prototype the only Accordion with some activities inside is the second one, the other 2 only have the 2 parts!

My main problem seems to be with the “parts”; for the card containing the Accordions I think that the only thing I can do is to calculate the size each time I click on the Accordion with “Set size”, but please if you any suggestion just let me know.

Thank you so much in advance!

accordion_forum.rp (93.7 KB)

#2

You are probably better off using dynamic panels and states to represent your accordion items, rather than groups and “card background” widgets. Otherwise, yes, you’d need to calculate the size of all visible items in the associated accordion group. Also, when setting the size of items in a group, their positions can jump around unexpectedly, so better to use dynamic panels instead of groups. In each dynamic panel state, you can size the background “card” (widget with shadow) in the editor as needed. Or, you can have one background for each accordion item (each dynamic panel) and set the size of that background to the size of the dynamic panel in the State Changed event of that dynamic panel.

Keep in mind that when using the “push/pull widgets below” option, the widgets involved must be completely below the target widget and have some overlap in the x-dimension. So for example, your “Part B” group is located to the right side of the “Accordion 2” group, and its width overlaps the width of the “Accordion 3” group, but not the “Details” group within “Accordion 3”, so that “Details” header group doesn’t get pushed. But, if you have some part of that “Part B” group which overlaps the width of “Details” then it would work–for example, a hotspot or box widget with transparent fill and no border which stretches the width of the “Accordion 2” group.

Refer to the tutorial here for creating accordions:

#3

Thank you so much for your answer, I solved some of the problems, but still having some issues mainly with the container, not resizing as I hope :slight_smile:

in addition I try to use only Dynamic panels but using the state of the panels I can’t have the animations I want and following the tutorial you linked me (hiding/showing the dynamic panels) still have some problem with pull/push of widgets.

I tried starting again with a simpler version of my structure, but as you can see in the file attached it still doesn’t work as expect (the parts inside not pushing the others accordions), I’m sure I’m missing something here

nested_accordions.rp (78.9 KB)

thank you again for taking time to answer me