The expand and collapse snippet is an organizational element that allows the user to access multiple categories and details with ease. The user controls how content is shown or hidden on the page.
This snippet is most appropriate when you have more individual items of information than one page would allow, but not enough for each item to be an individual page. For example, you could have content on how to apply to a program based on your certain criteria, and the reader clicks on each topic to expand the details.
With the expand and collapse element you have two fields to fill out: the summary and the details. The summary is what is shown when the widget is collapsed, and the details when it’s expanded. The details section allows multiple paragraphs, inline links, bullets and other inline styling.
You can use multiple expand and collapse widgets on the same page with headers and/or descriptions in between. This element can also be used with callouts.
When an expand and collapse item is closed, the entire row becomes a button to trigger it open. Never make the closed portion a link. Instead, use the expandable part to set the context to what the user can expect, and include the link there.