Accordions

Use accordions to collapse groups of page content. That way the user can read the titles and find what they're looking for faster.

Accordions let you fit more information on a page without overwhelming your users.

Accordion example

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat nec mauris eget cursus. Donec a sodales velit, id iaculis lacus. Curabitur faucibus velit nec enim laoreet ultrices. Proin ac orci nec lacus condimentum pharetra. Morbi tristique, nibh vitae euismod accumsan, lorem tellus auctor enim, in sodales orci nibh eu dolor. Proin in orci in lectus venenatis tincidunt eget vitae odio. Donec felis tortor, dignissim a tellus at, suscipit consequat augue. Nullam auctor tortor vitae odio fringilla, in suscipit dui sodales. Vivamus id tristique nibh. Morbi at luctus diam. Duis non ipsum non urna imperdiet gravida posuere a nulla.

Accordion title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat nec mauris eget cursus. Donec a sodales velit, id iaculis lacus. Curabitur faucibus velit nec enim laoreet ultrices. Proin ac orci nec lacus condimentum pharetra. Morbi tristique, nibh vitae euismod accumsan, lorem tellus auctor enim, in sodales orci nibh eu dolor. Proin in orci in lectus venenatis tincidunt eget vitae odio. Donec felis tortor, dignissim a tellus at, suscipit consequat augue. Nullam auctor tortor vitae odio fringilla, in suscipit dui sodales. Vivamus id tristique nibh. Morbi at luctus diam. Duis non ipsum non urna imperdiet gravida posuere a nulla.

Accordion title 3

Donec augue massa, gravida eget rhoncus imperdiet, consequat id purus. Aliquam lacinia enim quis nulla pretium dictum. Etiam blandit interdum augue quis dignissim. Vestibulum feugiat faucibus tincidunt. Donec convallis sem in nulla interdum semper. Donec dignissim porttitor lectus ac dignissim. Nunc sed nibh sit amet risus volutpat mollis. Nam id ante leo. Nam id erat id dui pretium tincidunt et vel magna. Sed orci neque, pretium at bibendum eu, ultrices ut odio. Proin sagittis diam non dui sollicitudin, id ornare tellus suscipit. Donec viverra magna et nisi malesuada laoreet. Vestibulum cursus magna eu nisl consectetur, in eleifend nisl blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tristique nec turpis sit amet tristique. Vivamus viverra lobortis augue, et imperdiet justo pretium non.

Accordion title 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat nec mauris eget cursus. Donec a sodales velit, id iaculis lacus. Curabitur faucibus velit nec enim laoreet ultrices. Proin ac orci nec lacus condimentum pharetra. Morbi tristique, nibh vitae euismod accumsan, lorem tellus auctor enim, in sodales orci nibh eu dolor. Proin in orci in lectus venenatis tincidunt eget vitae odio. Donec felis tortor, dignissim a tellus at, suscipit consequat augue. Nullam auctor tortor vitae odio fringilla, in suscipit dui sodales. Vivamus id tristique nibh. Morbi at luctus diam. Duis non ipsum non urna imperdiet gravida posuere a nulla.

When to use accordions

Content that might make sense in accordions:

  • Program/service descriptions.
  • Brief profiles of people.
  • Event descriptions.

Accordions can contain text, images, tables. However, don't put too much content in an accordion panel or your users can lose their place.

Guidelines for using accordions

  • Content in each panel should be under 3000 characters or less than the height of an average browser window. If you have more than that, it might be time to make a new page.
  • Accordion blocks shouldn't contain more than 12 panels. If you have more, try to group the panels into separate, logical accordion blocks with headings for each (example: Human Resources). You might need to move some content to a separate page.
  • Sub-accordions inside sub-accordions are not allowed. If the content is that complex, it should be moved to a separate page.

How-to

(These tutorials are on the University Systems website.)