1

I am creating a design that uses two columns of accordion menus, when a user expands one menu, should both sides expand, or should only the column that is active expand?

Option 1 Option 1

Option 2 Option 2

I'm thinking option 1, but I'm curious about what others might do. Thanks!

2
  • Is there any relationship between the information shown in column 1 and that shown in column 2? – Graham Herrli Jul 12 '16 at 22:38
  • The would be in the same category - in this example, this is one section of a FAQ. All of these items relate to one another, but there is no direct tie between any of the items. – bentheben Jul 13 '16 at 0:19
1

If a design uses two columns of accordions it isn't an accordion. See the definition below for the accordion tag.

An accordion is a stacked list of item references (e.g. labels or thumbnails), where each item can be "expanded" or "stretched" to reveal more content associated with that item. Typically only one item can be expanded at a time, and expanding a second item causes the last opened item to be closed.

Based on the definition the pattern you have implemented here will seem illogical to users in both cases. When a user expands content in one column previously expanded content will be collapsed. But, if a user expands content in another column, previously expanded content in the other column will not be collapsed. This is inconsistent behavior and will possibly confuse your user. This inconsistency can be eliminated by using an atypical accordion which allows multiple items to be expanded.

Option 2 has additional problems since expanding content in one column causes an unnecessary visual change in the other. I say unnecessary because 'syncing' the accordions reveals implementation details (side by side accordions) that the user is probably unaware of.

For these reasons I would consider moving away from displaying 2 columns and stick to a single accordion for collapsible content. The image below shows the use of a single accordion for collapsible content on a Facebook's Help Center page. Note that the accordion used here allows for multiple items to be expanded simultaneously.

enter image description here

0

Unless the corresponding column is related to the item you are expanding, I would also go with your suggestion of option 1.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.