An accordion is a vertical list of headers, users interact to reveal or hide content within them. They reduce page length and scrolling.

Using an accordion to group content into individual drawers leads to shortened pages and reduced scrolling. It's in your control to either open or close a drawer.

# Component


# Rules


  • Use visual feedback for different states (e.g. hover, focus, active, collapsed and expanded)
  • Use plus and minus icons to denote closed and open accordion areas


  • Don't place an accordion inside another accordion. That's just silly

# Structure

Accordion structure

Last Updated: 10/6/2020, 8:34:39 AM