User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
If you have scenario where you have a card component that can be expanded and collapsed independent of other cards
eg. when expanding this card, other cards do not collapse.
Is this still an accordion or something else?
I am asking this in context of making a UI library
It might be a collapsible panel then.
An accordion by conventional definition is a self-contained panel made up of a 'stack of drawers'. Each 'drawer' can be expanded individually - an action that customarily closes any other drawer open at the time - to reveal its content.
An accordion following this description can be a collapsible panel at the same time. So while you can open one drawer at a time, the panel header might in addition offer a 'collapse panel' function with which the stack of closed drawers is compacted further into a flat rectangular strip or tile.
As with many conventional UI elements naming is awkward because the metaphor is inadequate. An 'accordion' like the musical instrument from which it borrows its name tag merely refers to something that can expand in one direction by several times its collapsed size, nothing more. The word is simply not specific enough.
But for recognition purposes in a design system - or UI assets library - the name is good enough when referring to a 'thing with multiple expandable sub-boxes'. That's why I use the 'drawer' metaphor: On a chest of drawers you typically only open one at a time. While it's mechanically possible to have several open at once, of course, most people tend to avoid that due to injury risk.
