Nascent attempt at using Foam to curate and leverage a personal memex

Project maintained by djplaner Hosted on GitHub Pages — Theme by mattgraham

When to use accordions

detailed look at when to use accordions


An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner.

Rationale and benefit

Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore. Giving people control is #3 on the list of the top heuristics for usable design. In theory, this concept sounds reasonably human centered.


  • Collapsing the page minimizes scrolling.
  • The headings serve as a mini-IA of the page. This allows users to form a mental model of the information available.
  • Hiding (some of) the content can make the web page appear less daunting.
  • Accordions can be a better alternative to within-page links, which are problematic because they break people’s mental model for hypertext links. People expect clicking a link will load a new page. Without proper cues people are confused about where they are on the site.


  • Forcing people to click on headings one at a time to display full content can be cumbersome,
  • Accordionds increase interaction cost
  • Hiding content behind navigation diminishes people’s awareness of it
  • Accessibility is an important consideration
  • Printing