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.
I created a "plus" shape by duplicating the "minus" shape, rotating it 90° then center- and middle-aligning both.
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").