An accordion is a vertically stacked list of headers that can be clicked to reveal or hide content.

Accordions are a great tool but they must be used strategically. Content Creators are often tempted to use accordions as a way of condensing long pages. However, this can be problematic because it increases interaction cost. Every time a user clicks this is an extra step for a user. If a user needs to open multiple accordions to get an understanding of what is on the page, this isn’t helpful.

On Surrey.ca accordions are used for payment options, recreation, timelines, and audience groups. Must have detailed enough information to make it useful for someone to click on an accordion bar.

Payments (example property taxes payment)

  • Defaults open to main payment option
  • Used for complicated payment options only (if only 1 sentence is needed to explain each payment, an accordion is not needed)

Recreation (example Cloverdale Recreation)

  • Part of the recreation facility page template.

Timelines/ Steps (example PRC Plan)

  • Can default open to current phase of a timeline
  • Option to use icons to show which phase is current (circle with filled in dot), pending (circle no fill), or complete (circle with checkmark)

If you need to make an accordion and your content meets the above requirements, please email webteam@surrey.ca to make a request.