Help with this prototype please

Hello there,

I’m new to prototyping on Axure and I really need the community expertise with this.

  • I have 3 accordions stacked below each other.

  • When accordion 1 is Click or Tap, it displays the corresponding ‘product card 1’. Accordion 1 tab disappears, only displaying accordion 2 & 3 below the product card.

  • When the up chevron is Click or Tap on the top right corner of product card 1, the card collapses and accordion 1 appears again.

  • Another scenario, when the user Click or Tap on accordion 2, product card 1 automatically closes and returns to accordion 1 tab being displayed, and at this point, product card 2 displays and accordion 2 disappears. Only displaying accordion 1 on the top of product card 2 and accordion 3 below product card 2.

  • The same steps follow suit with accordion 3.

I hope a kind soul will outline the steps needed to achieve this prototype. I’ve attached the rp file so you’ll know what I’m trying to achieve here.

accordion_test.rp (57.2 KB)

A big thank you in advanced.

You can use dynamic panel to achieve that kind of behavior.
While set panel state, click on more option and choose the push and pull widget below.
See attached file, if this is wat you want tho:
accordion_test-done.rp (119.3 KB)

regards
AT

Or you may use repeater (& dynamic panel & fire event) if you want to scale it up for more accordions afterwards:
accordion_test_modified.rp (125.9 KB)

Best,

Hi Anh. Thank you so much for your help, much appreciated. It’s exactly what I’m after.

Hi Pierre.J, I’m going to try your method as well and see how it will work according to more accordions being added later. Thank you and really much appreciated.