Available Styles

The examples below are images. Use the “Live Site Example” links to see them in action.


Live Site Example: Cleft Lip and Cleft



Live Site Example: Application FAQs


Call to Action

Live Site Example: Cleft Lip and Cleft


Usage Notes and Guidelines

  • Expandable accordions can be added to any page of seattlechildrens.org and used to condense longer pages to make them more scanable.
  • Information contained within them is searchable, and can contain photos, videos, links, bullet point lists, subheads and pretty much any other content that can be shown outside of an expandable.
  • Make the click for information worth the effort. You might frustrate someone if an accordion only contains a few sentences when expanded (see example below), or if they need to open the majority of accordions on a page to have their questions answered. If you find yourself doing this, try using other styles such as bullet point lists or headers to break up your content.


Contact ehealth@seattlechildrens.org.