Embed accordion and responsive design

#1

Hello eveyrone, I have an intermediate level in Axure, so variables are difficult for me.
I have a problem trying to do multiple accordions within an accordion.

in my example i have accordions, and they work perfeclty in the mobile view, but when I go to the tablet and desktop view, and I open the accordions within a tab, and then I go to the second tab, the sub accordions are push and pull from the previous interaction

to see the behaviour

  • Play with the mobile view
  • Then select a tablet or desktop view
  • go to the first tab and open all the tabs
  • go to the second tab and you will se that the first tabs push the second as well.
    Play around and you will see that one impacts the other.

I need to do something like:
in tablet and desktop view
push pull only the panels withing their dynamic panel

how can I do so?
Test.rp (98.8 KB)

Thanks in advanced

#2

Hi isabelarias,

Hidden widgets technically still exist on the page, so any widgets (hidden or not) in the push/pull path of a widget will still be pushed or pulled. I’d recommend checking out Anthony’s post here to see what would be considered to be in a widget’s push/pull path:

https://forum.axure.com/t/push-pull-and-groups/34240

As a workaround in this particular case, what you could do is place both of the groups in your file in separate dynamic panels (by right-clicking them and selecting “Convert to Dynamic Panel” from the context menu). Since content within a dynamic panel can’t push or pull content outside of the panel, this would prevent your tabs from pushing/pulling each other unexpectedly.

I’ve gone head and attached an edited version of your file below. Please let me know if you have any questions or if I misunderstood anything!
Test_edited.rp (106.3 KB)

#3

Hello @Simon_Axure
Many thanks! So it works perfectly on desktop, but when it comes to the mobile version, it doesn’t work anymore. What do you think it will be the best approach for this?
If you go to the mobile version, the push/pull doesn’t work anymore.

Also, Dynamic Panel won’t work on the mobile version, because the embed accordions won’t push-pull the parent accordion.

I don’t know if I explain well. Let me know.

#4

Hi isabelarias,

Ah I see what you mean–sorry for not catching this earlier! Because push/pull is contained within dynamic panels and the accordion menus are stacked on top of each other in the mobile view, the push/pull interaction won’t work as expected in this particular AV.

To work around this, you’ll want to implement a sequence of actions that first hides the outer dynamic panel, toggles the inner content (which will adjust the panel’s size accordingly), and then shows the outer panel again with its newly adjusted size. This will make it appear as if the content inside of the dynamic panel is pushing/pulling the rest of the accordion. If you’re interested, Jane provides a more detailed explanation of this workaround here.

I’ve gone ahead and implemented this workaround in the first case of the “Tiroir 1” dynamic panel’s “OnClick” interaction. I also re-named the dynamic panels containing the content to “Content 1 DP” and “Content 2 DP” for clarity. Check out the file here:

Test_edited2.rp (108.3 KB)

You’ll also want to make sure to add this workaround to any other actions that might change the size of your dynamic panels. Since the size of the Content 1 DP can be changed by showing and hiding the “A”, “B”, and “C” groups in the “Content_tiroir_1” group, you’ll want to edit the events that are showing/hiding these groups as well. In the file, I’ve re-named the widgets with these events to “Group A Header”, “Group B Header”, etc. and added the necessary actions to each one:

2017-11-03_1211.png526×936 65.8 KB

(Note that the first case is checking if the current AV is the mobile view because this workaround will actually interfere with how the push/pull is set up in the other views.)

I hope this helps! Please let me know if you have any questions.

#5

Hello @Simon_Axure Many thanks! this is exactly what I was trying to do.
I’m gona take a look and come back to you if I have any question! thanks! :boom:

#6

Hello, @Simon_Axure is there a simpler way you can explain me this, I’m struggling to do this, can you explain me the best way to structure the tabs and the dynamic panels (content)? and then where I should add the conditions?
Do I need to have this structure:

tab 1 ((this is a dynamic panel )Do I put hide show parent here ? in which state should I add the code, open , or close)

(level 1) Parent content from tab 1 ( DP)

      (level 2) Inner content (Group = groups embed Dynamic panels ) 
          
           Tab 1.1 (Do I put hide show parent  here ? )
           (level 3) Sub content from tab 1,1
         
           tab 1.2
          (level 3)Sub content from tab 2.2

tab 2

(level 1)Parent content from tab 1 ( DP)

(level 2 )Inner content 2 (Group = groups embed Dynamic panels ) 
          
          Tab 2.1
          (level 3)  Sub content from tab 2.1
         
          tab 2.2
          (level 3) Sub content from tab 2.2

I.m a bit confuse and I cannot make this work when trying to apply it to my prototype :frowning:

can I have like a visual representation or something ?

#7

Hello @Simon_Axure I did it!! thanks for the support!!

Best

Isabel

closed #8
unlisted #9