Available Styles

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

Basic


Live Site Example: Cleft Lip and Cleft


basic-expandable-accordion

FAQ


Live Site Example: Application FAQs


faq-accordion-accordion-expandable

Call to Action


Live Site Example: Cleft Lip and Cleft


call-to-action-expandable


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.


Questions?

Contact ehealth@seattlechildrens.org.