How to collapse selected accordion when choosing another?

newbie-question
#1

Hello,

I am working on a widget library that is based on US Web Design System.

Currently I am stuck. I am trying to figure out how to make the selected accordion collapse when selecting an unselected accordion.

Example: https://designsystem.digital.gov/components/accordion/

File: Accordion.rplib (395.5 KB)

#2

I can think of two approaches, there are likely more but these are two that I’ve used several times over the years.

I have a live demo and an rp file Accordion Set Examples.rp (227.9 KB)

  1. Use a repeater for the whole accordion set
    This option is a bit more controlled but less flexible

    • Interactions inside the repeater update repeater data
    • Interactions on the repeater modify the visual based on repeater data

  2. use Fire Events to make all other accordions close before opening the one you selected
    This option is more flexible but also can get a little bit finicky as you’ll be modifying a lot of interactions if you add or remove accordions

    • There is a hidden shape called “Close All Accordions” that performs actions that will make every accordion close.
    • On the Accordion Target shape, on Click we first trigger the actions on Close All Accordions with Fire Event and then we do the action that makes an accordion open.
    • With this method you could also create hidden shapes inside each accordion’s dynamic panel that trigger the close actions, and then Close All Accordion would trigger each of those hidden shapes but I didn’t want to overcomplicate the example.
    • I recently shared another example with Fire Event which you may find helpful to learn from if Fire Event is new to you.

  3. There is a paid third party library available with several USWDS controls, I have not purchased it and cannot vouch for its quality but based on the demo it seems pretty solid.

One last thing: It’s generally easier to share .rp files, not .rplib files. Depending on one’s settings, opening an rplib file will “install” that library and that’s just annoying to have to remove.

#3

Thank you! I knew there had to me more than one way to create this accordion. I really do appreciate your help and explaining how to make this happen. I finally got it to work properly!

Best,

Kaiju

#4

I’m glad I was able to help, Axure can do a lot of things but sometimes the way you have to approach things is counterintuitive or at least a little bit strange

closed #5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.