Should an open accordion section be hidden when the user clicks on another section?

Question

I'm designing for an enterprise-level software. The software is a repository for different departments to store their files. The content types are Dashboard and Reports but inherently both of them are PDF files. (I know this is confusing, but sometimes you have to work with what you inherit.)

^{download bmml source – Wireframes created with Balsamiq Mockups}

EDIT

Thank you for the responses. I can see an agreement in the suggestions to reduce the cognitive overload by keeping only one accordion open at a time. However, what happens when there long list of accordion blades? It works alright for the first blade but I'm unsure how the 8th blade will function? Hide the top blades?

^{download bmml source}

What should be the interaction? User clicks on 4, should the one on top hide or show below?

I'm more interested in the reasoning behind the interaction.

Answer 1

The best practice is to HIDE the currently open level once you click on another accordion tab. The reasoning is quite simple:

• Reduce cognitive load: suppose you have catA-->item1,item2,item3,item(n) open and then you click catB-->item1,item2,item3,item(n). If you keep catA open, then you're forcing your user to discriminate between the items of different categories, adding a lot of friction and confusion, specially if user opens more than one tab.
• Avoid scrolling: the main reason for accordions is to save space in an otherwise long list of items/content. If you keep the tabs open, you'll be forcing the user to scroll down, making the whole accordion purpose useless

Be aware that if the list is not enough to overflow the boundaries of the screen, it's better to keep all items at sight, unless you need to hide them because of the first reason above: to reduce cognitve load

A caveat

There's a possible scenario when you may want to keep more than one tab open at the same time: when the user's workflow shows they constantly jump between items of different tabs. While this could be avoided with proper Information Architecture, it's true that sometimes you can't avoid it (like when you inherit an existing system, just as you said) .

In this case, I suggest to have a clearly labeled checkbox where users may choose to keep tabs open. Some sites do this at tab level, as in CatA-->checkbox,CatB-->checkbox,CatC-->checkbox but in my opinion it's better to go for an "all or nothing approach" and have only one checkbox. If checked, then multiple tabs can be opened at once.

Answer 2

If:

1. there is any reason the user might need to compare the contents of two accordion areas, or any other reason they'd have need to see more than one at a time, and
2. the quantity of content within each accordion block is small enough that there is enough room to usefully open more than one section,

then it is reasonable to allow multiple accordion sections to be open simultaneously.

In all other cases, opening one accordion section should collapse other sections.

(You could maaaaybe fudge the second point by making each accordion section overflow:scroll above 50% viewport height. The first point is the more important one.)

(In response to the question update: a large number of accordion sections suggests more strongly that only one should be open at a time: the space taken up by the extra headings make it even less likely that there will be enough room on screen for useful comparisons between two open accordion sections.)