Accordion vs collapsable section

Question

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?

Answer 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.