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

Accordion

# Rules

Do

  • 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

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

# Structure

Accordion structure

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