Accordion toggle to change state


Hi. I’ve tried to look through some of the older posts about changing the state of a n accordion header but I can’t quite figure it out for my own design. I woud like to change the state of the ‘Overview’ header in the attached file from open ( - icon and top border blue) to closed (+ icon and top blue border removed).

Any help would be greatly appreciated.FS DF prototype.rp (135.3 KB)


In Axure there are multiple ways to do this (as with about anything)… I’d recommend creating a “selected” interaction style for your “Overview” widget and the “minus” widget, then setting their group, “overview accordion” to Selected when shown and Unselected when hidden.

Your “minus” widget needs a little work to change it to a “plus”. Because it is a shape, merely assigning a selection style won’t be enough, unless you just want it to disappear, in which case you could assign a selection style with Opacity = 0%. You could actually do that, combined with a “plus” shape that had default opacity of 0% and selected style of 100%. However, a more reliable and flexible method of showing one thing/mode/style and hiding another is with a dynamic panel. So, you can make a dynamic panel from your existing “minus” shape, add a second panel state with a “plus” shape, then just change states of the dynamic panel to ensure only one is shown at a time. Then you can sync that with the group’s selection state such that any time the group is selected the dp state changes to “plus”.

Here is an updated .rp file showing this approach.
FS DF prototype.rp (130.2 KB)

It took a while to figure out how you were “opening/closing” your accordion item. Kind of odd that it is assigned to the Page Click or Tap event, but maybe this is just for your demo here. So, you click anywhere on the page and it toggles visibility of “overview_content” (and also a Set Panel State action, but nothing is selected …maybe this is for the “overview_content” dp, but with nothing in the second state? Since you have names of “open” and “closed” I’m going to assume your intent is to change states to show/hide the text content, which makes sense.) So, you could add an action to set “overview_accordion” to selected and be done. However, it will be more reliable to have “overview_accordion” automatically selected any and every time “overview_content” is shown, and unselected whenever it is hidden (or alternatively, whenever the state of “overview_content” changes.)

In my demo file above, I changed a few things to make them more logical. This should also help if you need add more accordion items, or port this to other pages/prototypes. I set up a logic so that when "overview_accordion" is selected its associated content is shown, and when unselected that content is hidden. Clicking it toggles its selection state, which automatically triggers showing/hiding the content and changing the plus/minus icon.

  • I inverted the style for the "Overview" widget so that Unselected (default) does not show the border, but Selected does.

    • On the STYLE pane, I set the Border Thickness to 0.
    • On the INTERACTIONS pane, I created a Selected Style to show the border.
      • Click the widget it to choose it on the canvas, then at bottom of the INTERACTIONS pane, click “+Add a style effect like MouseOver”, click “Selected Style”, then “+ More Style Properties”, then Border Thickness: 3 and Line Color with your blue color.
        (Since this is set in its default style, it shouldn’t be necessary here, but just in case and to be more clear in this demo it is here, too.)
    • I set this "Overview" widget to be selected by default.
      • Clicked "Show All" then checked the "Selected" checkbox. This will now show the border by default but retain the more straightforward logic for selected/unselected.
  • I created a "plus" shape by duplicating the "minus" shape, rotating it 90° then center- and middle-aligning both.

    • I then created a dynamic panel for the icon by right-clicking it and choosing "Create Dynamic Panel", then duplicating State1.
    • I renamed State1 to "minus" and deleted the new vertical bar shape.
    • I renamed State2 to "plus".
  • I assigned a Selected event for the "Overview" widget to:

Set Panel State
PlusMinus to minus
“overview_content” to open

  • I assigned an Unselected event to change same dynamic panels to the other state.

  • I removed the Page Click or Tap actions and replaced them with Click or Tap on the "overview_accordion" group with:

Set Selected/Checked
This to “toggle”

Now, clicking the "overview_accordion" group toggles its selection state, which triggers the "Overview" rectangle in it to change selection state, which triggers "overview_content" to toggle states (either "open" or "closed") and changing "PlusMinus" to toggle (either "minus" or "plus").


Hi, thank you for your time and advice. Very much appreciated and helpful.