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

  • In my mind, cards are usually separate and not related content so i wouldn't put them in the same category as an accordion. Commented Aug 22, 2019 at 4:15

2 Answers 2


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.

  • 1
    Very nicely explained! Commented Aug 21, 2019 at 18:41

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.