Expand/collapse lists

Expand/collapse lists are used for long lists of short page content. They're similar to accordions since you can fit more content on a page while keeping it easy to scan. An expand/collapse list should not contain images, tables, or other blocks.

Expand/collapse list example

Expand/collapse title

Maecenas non imperdiet ipsum. Suspendisse nec placerat purus. Curabitur sollicitudin egestas nulla, vel scelerisque libero interdum at. Aliquam erat volutpat. Nam aliquet lacus odio, in laoreet est condimentum vel. Sed vitae tortor ac quam interdum ultrices. Proin consectetur ultrices turpis ut semper. Quisque vulputate ultricies aliquet. Etiam in laoreet turpis, quis malesuada turpis. Integer sagittis mauris sit amet eleifend pharetra.

Expand/collapse title

Maecenas non imperdiet ipsum. Suspendisse nec placerat purus. Curabitur sollicitudin egestas nulla, vel scelerisque libero interdum at. Aliquam erat volutpat. Nam aliquet lacus odio, in laoreet est condimentum vel. Sed vitae tortor ac quam interdum ultrices. Proin consectetur ultrices turpis ut semper. Quisque vulputate ultricies aliquet. Etiam in laoreet turpis, quis malesuada turpis. Integer sagittis mauris sit amet eleifend pharetra.

Expand/collapse title

Maecenas non imperdiet ipsum. Suspendisse nec placerat purus. Curabitur sollicitudin egestas nulla, vel scelerisque libero interdum at. Aliquam erat volutpat. Nam aliquet lacus odio, in laoreet est condimentum vel. Sed vitae tortor ac quam interdum ultrices. Proin consectetur ultrices turpis ut semper. Quisque vulputate ultricies aliquet. Etiam in laoreet turpis, quis malesuada turpis. Integer sagittis mauris sit amet eleifend pharetra.

Expand/collapse title

Maecenas non imperdiet ipsum. Suspendisse nec placerat purus. Curabitur sollicitudin egestas nulla, vel scelerisque libero interdum at. Aliquam erat volutpat. Nam aliquet lacus odio, in laoreet est condimentum vel. Sed vitae tortor ac quam interdum ultrices. Proin consectetur ultrices turpis ut semper. Quisque vulputate ultricies aliquet. Etiam in laoreet turpis, quis malesuada turpis. Integer sagittis mauris sit amet eleifend pharetra.

Expand/collapse title

Maecenas non imperdiet ipsum. Suspendisse nec placerat purus. Curabitur sollicitudin egestas nulla, vel scelerisque libero interdum at. Aliquam erat volutpat. Nam aliquet lacus odio, in laoreet est condimentum vel. Sed vitae tortor ac quam interdum ultrices. Proin consectetur ultrices turpis ut semper. Quisque vulputate ultricies aliquet. Etiam in laoreet turpis, quis malesuada turpis. Integer sagittis mauris sit amet eleifend pharetra.

When to use expand/collapse lists

Some content that might make sense in expand/collapse lists:

Your FAQ pages should not be the only location you have important information. Answers should be brief summaries linking to full explanations elsewhere.

Guidelines for using expand/collapse lists

  • Content should be under 400 characters, one or two short paragraphs. If you have more content than that for most panels, consider using accordions or moving the content to a separate page.
  • Expand/collapse list blocks shouldn't contain more than 24 panels. If you have more content, try to break it up into separate, logical blocks with headings between them or consider moving the content to a separate page.
  • Expand/collapse list blocks are intended to contain short content so they should not contain other blocks.
  • You can use them inside tabs and accordions as long as you follow the height restrictions for those blocks.

How-to

(These tutorials are on the University Systems website.)