0

Is there any difference in accordions vs collapsable sections? Can we say that accordions have data, and collapsable sections have a layout? But, how do we visually differentiate between them? The accordion can have arrows on the left and right, and so does collapsable sections. Is there any clarification between those two elements?

Let's say, by collapsable section I mean like longer forms, you have sections that can be collapsed to have a more organised form and to hide unwanted sections for the time being.

Accordion is more like FAQ. Sections does not close when you expand another section while accordion can only one be opened at same time.

Does anyone have any better definition of what is what and how to visually separate them?

1 Answer 1

1

I think in the past there were more differentiation between web components because there were very specific rules around how they were meant to be designed and implemented. However, in the modern minimalistic and flat design world we find that many components look and behave in a very similar way.

So rather than trying to understand what the terms mean, think about the behaviour of the components. You've pointed out the use of arrows or touch points to trigger the expansion or collapse of the sections or contents that they wrap around, and then there's also whether you can have multiple sections expanded at the same time or if only one section is open at any time (I believe this is the classic behaviour of accordions). Another consideration is whether the heading or label for the component sits within the same container or outside of it.

What you need to do if you want to use two different components for your design to allow progressive disclosure (i.e. let users decide how much they want to drill into the content) then you need to establish two components that have distinct visual and behavioural designs.

My suggestion would be that you stick to one only, unless there is a good reason to have two. Here is one good reference about designing accordions from Smashing Magazine that summarises the key points.

3
  • Thank you for this link. As I read the user testing report from article you provide on accordion icon placement it is also interesting that the best option is the icon on the left of the label. But at the same time, this could also be collapsing section. But again, as you stated, both defers in the use. But if you need both at same time (because of generic reason) there must be some visual clues of what is accordion and what is a section so the user could understand Apr 14, 2022 at 8:29
  • Another question, can the accordion have an input or just text information? Apr 14, 2022 at 12:27
  • @CookieWookie what would the input in the accordion be used for? It is not common (at least I have not seen it before) for accordions to have an input field in the heading/title section but there may be a good reason to try it.
    – Michael Lai
    Apr 14, 2022 at 22:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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