Expand & collapse

The expand & collapse rendering is generally employed when content grows too long to fit comfortably on a given page. It is often used in list form with a series content items.

What's Included In This Rendering?

Component overview

A: Expansion link

Required.

An expansion link provides the click or touch point to reveal the content hidden within (B). Once activated, it can be interacted with again to re-hide the content. Options for styling include all link (link opens in new window) styles, though an initial plus or minus icon (link opens in new window) is either added to the front of the link or supplants other icons in the same location (i.e. the circled arrow of the primary link style or the plain arrow of the link list style).

B: Expansion content

Required.

This component contains the content that is shown and hidden by interacting with the expansion link. This area is highly flexible and can contain either plain content akin to that of the content block rendering or other inset renderings.

NOTE: An optional nested expansion link can be added to expansion content. See sample 3 below and refer to the “read more” link, which expands additional content within the original expansion.

C: Show all

Optional.

When a long list of expand & collapse modules appear together in list styling, an additional option to expand all expansion links simultaneously may be added above the list at the designer’s discretion. The primary link (link opens in new window) style is used, though the initial circled arrow is omitted.

How Can I Use This Rendering?

Sample Configurations

SAMPLE 1: Primary-styled expansion link

SAMPLE 2: Tertiary-styled expansion link

SAMPLE 3: Link list-styled expansion links with nested expansion link