How to realize show selected-menu-item-bar when menu-item clicked

I want to realize like this: when menu button clicked, corresponding item-bar show, but other all hide.

So I try use dynamic panel to realize it, but when I click by this order, it won’t be work:
Button1, Button2, Button3, Button2
It seems when I click button3, panel container cover Button2, so I can’t click Button2 more.

Now I want to ask how to realize it, whatever use any way.

I think using repeater to realize is an easier way.(and easy to add new buttons)

add a new column named “active”
when item load , if “Item.active” doesn’t equal “true” hide color bar.
click event: update repeater set active equal to clickeditem

https://7gz44w.axshare.com
selected-menu-item-bar.rp (48.0 KB)

@kotepillar, I see your post is tagged with “rp-7” --are you using that version? I think RP7 supported repeaters, but it’s been so long ago I’m not sure. Let us know if you are using RP7 …I think I still have it on an old system. I think it is better if you can examine a working .rp file, so reply if you are using RP7 and don’t understand the repeater approach from @pboy2925 . If not, I’d recommend you either set it up as one dynamic panel per button or forget about the dynamic panels and just use basic rectangle widgets with selection groups. Using a single dynamic panel won’t work well. With 3 buttons and two states per button (selected, unselected) you would need 3^2 = 9 states. Four buttons would need 16 states and so on.

If you do have RP9, read on. As with most things in Axure, there are many possible ways to solve your problem. It kind of depends on what makes sense to you, what you need the prototype to do–will it be reused, etc. Here are some basic methods you can consider (and I’m sure there are even more.)
Refer to this file:
Single-select button methods.rp (257.3 KB)

Each page has a different method to solve this problem. Descriptions are included.

  • Selection groups
    • Shows very basic simple method, and the advantage of the Selection Groups feature.
    • This is the simplest method I know, but not that “extensible” --more work to add, remove or change buttons later on.
  • Groups with selection groups
    • Offers a tricky but clever method to make the blue bar visible when selected.
    • Demonstrates a further advantage of Selection Groups.
  • Dynamic Panels with states
    • A method that provides good way to support multiple button states (more than just two.)
    • Not as easy to extend or maintain.
  • Dynamic Panels with selection groups
  • Move one selection bar
    • Different way to handle this with only a single blue bar.
  • Basic Repeater
    • Hopefully a good introduction to the Repeater widget.
    • Much more extensible and powerful approach.
  • Advanced Repeater
    • Even more powerful.
    • Should be very similar to method shown by @pboy2925

@pboy2925, I agree the Repeater widget is a great solution for this “single selection” or basic radio button behavior, and once it is set up, it’s easy to maintain, reuse and extend. However, I wouldn’t say that repeaters are easier–unless you already know how to use Axure’s repeaters. Based on my own learning and use of Axure over the years, a multitude of forum posts, and training designers to use Axure, the Repeater widget is the hardest thing to learn and apply correctly in Axure. Especially for designers and others without programming experience (and those with “too much” experience as well!) All that said, it is worth learning and this is a good example why.

Thanks for your reply.
I use repeater realize it.
But now I want to add different events to each MenuItem, now I don’t know to how to handle it with repeater, so I use @mbc66 solution.

Thanks for your reply.
Sorry, I tag wrong, I use rp9.
As I reply to pboy2925, I don’t know how to add different click event to repeater Item, so I use your solution, it may be more simple for only a few buttons, after all it’s only prototype for demonstrate