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. – Nathaniel Flick Aug 22 '19 at 4:15

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! – Omkar Chogale Aug 21 '19 at 18:41
  • +1 I would give this answer a tick :) – Michael Lai Aug 22 '19 at 4:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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