Inline expand means part of the module’s content is exposed by default and the remaining content is hidden. The full content is revealed inline only when requested by the user.
See also: Types of Expand/Collapse
- When used in a new line, padding above trigger element is 20px.
- Trigger element follows link text styling standards, Open Sans Regular 15px and #005CCC. Exception for card styling.
- When used in a new line at the bottom of content area, a gradient should be used.
- Icon for trigger element can be find in the SHC Icon Font Library.
When Do I Use This?
In its default state, it provides the user focus on the primary page content and a scent of that content section, while increasing visibility of the neighboring section. When expanded, it provides on-demand access to hidden (secondary) content or features
1. Content should be partially exposed by default.
2. The trigger element for inline expand is a link with a caret.
Caret placement is on a new line at the bottom of a content area (with gradient), or at the end of a line of text (no gradient). In Card UI, the caret and link placement are centered below the content (no gradient). See below for Card UI examples.
3. Copy guidelines: Use a noun plus caret. Do not use verbs.
Only exception: for legal text use “see details”. Do not use the word “more” plus a noun.
4. Inline expand content should contain informational content only.
Do not include UI elements as part of expanded content
5. Inline expand cannot be used inside of an expanded accordion.
There are two prime objectives to ensure this pattern is accessible: keyboard only users must be able to tab through with relative ease, and screen readers must be able to read out all the content including the expand link affordance and that an action is required. The status of the Inline Expand pattern is defined as expanded/open or collapsed/close. Therefore, while the user is navigating through the content module that has inline expand present, they should be properly informed if any expandable content area is open or close. This ensures a user is able to navigate to the hidden content of the module. While sighted users can easily tell if an expanding section is open or closed, screen-reader users need to be alerted when a section's state has changed.
This pattern reduces the amount of real estate required for a content module, while increasing visibility of the neighboring section. It supports natural reading of the exposed content. When expanded, it provides on-demand access to hidden (secondary) content or features
Informed by an SHC audit to review all example uses, followed by efforts to clarify and provide distinct patterns for each use case - see all expand/collapse
Multiple cues combine to provide a clear affordance to the user, and differentiate it from other elements on the site:
- The trigger is link blue because it is typically used within body content, where other links are blue.
- The trigger is body color when used in Card UI because it has its own clear target area, which ensures its visibility and affordance. The trigger is aligned center in this instance.
- A caret is used to communicate the direction of expansion and to clarify its utility from a link. It is placed on the left, which provides a visual cue to the user, which is understood faster than words. Accordions use the same caret, and place the caret on the left for the same reason.
- In the use case of text truncation, the gradient is used to separate the trigger element from the content area, and hint to the user that more content is present. Elimination of the gradient was considered; it was found to be necessary to provide contrast on various colors. A gradient with a button "Show full article" was a very common design pattern for news sites in 2015/16.
- Copy should include "show.." and "hide..." in their respective states.
Baymard Sears Desktop Usability Audit with Product Page addendum
Baymard audit 2015 suggests aligning all PDP instances to the gradient example.
Where to Place Your Accordion Menu Icons
Refers to 2 studies about placement and icon choice.view article
UI: Proper Indicators for Hidden Elements
Article about using effective indicators to ensure user comprehension that hidden content exists. Arrow direction, and gradient fades are mentioned.view article