Strange Push/Pull Issue with Accordions

[benperson]

Hi all!

I’m very new to axure (downloaded it yesterday) so I’m still trying to get my head around how some of the functionality works.

I have created an accordion group (only top level) and almost have the functionality that I want. Most accordion groups that I have seen work by being able to open and close any accordion at any time, independent of whether another accordion is open. I would like the functionality to only open one accordion at any time.
I thought this would be easy by adding a case to onClick for each accordion where the body of every other accordion gets hidden. This however fails when (for example) accordion 2’s body is shown, then opening accordion 1. This pushes accordion 3 down when it should actually stay in the same position.
I believe this is because accordion 1 is ‘pushing’ the widgets below it down when opening and accordion 2 is ‘pulling’ the widgets below it up when closing, but these processes cannot be run asynchronously?

How do I get it to work how you’d expect?
(Have a try)
Accordions_example.rp (62.6 KB)

Thanks!

[AngryComedian]

Hello @benperson,

Welcome to axure world!

You have done all the interactions proper! No problems there.
What you have missed is the transition time. What is happening is, while a body is closing, another opens and push happens and that is where things start getting messed up.

Try removing the animation effect time of 200ms everywhere while hide/show/toggle. It will work as expected. Let me know if you still cant get it to work. I will try my best to provide help.

As a UX designer, let me point out. There is a difference between Accordian and Expand collapse.
In an accordian, the accordian height always remains the same. On body is open and rest are closed. It is derived from the musical instrument accordian!

However, in expand collapse, you have the freedom of closing or opening all or any number of bodies etc.

P.S. : there is a better way to do accordians.
Implement a combination of Selection groups with Hide/Show

1. All your headers are part of a selection group.
2. On click of header, make it selected.
3. OnSelected, 
-> show body and rotate caret; 
OnUnselected, 
-> hide the body and rotate back the caret.

This will work as a perfect accordian for you.

Cheers!

[benperson]

Hi @AngryComedian,

I managed to implement a temporary work around which involved part of what you suggested.

I’ve changed the structure of the onClick cases a little and removed the pull animation when hiding another accordion body. It doesn’t look as smooth but no longer has the undesired behavior!

I’ll try out your tip with using onSelect too.

Thanks for the help!

[AngryComedian]

Let me know if you need me to do a demo file for accordian!

[benperson]

I have implemented the onSelect method which is much better since I don’t have to update all the other accordion’s onClicks! The only thing I’m wandering now is if I can keep that transition when pushing/pulling the widgets below? It just seems a bit jumpy to me.

Thanks for all the help @AngryComedian

(my implementation - Accordion Select page) - Accordions_example.rp (92.2 KB)

[AngryComedian]

Hi @benperson,

Nice one!
I have uploaded a more compact version.

You can use selection groups and that will enable you avoid evaluating conditions while making selections. See the selections group usage below:

Implemented in file below. See Accordians compact page
Accordions_updated.rp (106.9 KB)

P.S. These selection groups work on groups too. What you will need to do is make group selected on click.
Since groups don’t feature onSelected and onUnselected methods, you can use them on Title rectangle as you are doing now.

See the use of selection group in Tab control training on Axure website

Regards,
AngryComedian

[benperson]

Thanks for all the help @AngryComedian!
I’m slowly getting to grips with Axure and its power

Thanks again,
Ben

[system]

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