From Forum Nokia Wiki

This design pattern is part of the Mobile Web Design Patterns series.

Contents 1 Description 2 Use when 3 Rationale 4 Exceptions 5 Design Tips

Description

A series of list items that (each) expand when clicked to reveal additional related content.

Use when

• A user must have access to, or interact with large amounts of content yet there is only room to display smaller amounts at a time. Examples include:
  • Revealing submenu options.
  • Revealing non-critical metadata associated with a dataset (ex. revealing the sender’s address or message size in an email application).

Rationale

Expansion lists have several advantages over other formats:

• They take up less vertical space when collapsed yet can display more information one expanded.
• They provide users with a higher level of control over the information they interact with at any given time.

Exceptions

In all cases where JavaScript is crucial to the interaction, it’s worth considering how the content will be displayed on a less capable browser. In the case of expanding lists, would the content still make sense if the expanded content were not visible or instead—visible all the time?

If page refresh is needed this becomes less useful.

Design Tips

• Where possible, visually distinguish between links or controls that will prompt an expansion vs. those that will simply drill down—especially as the drill down will likely require a page refresh that the user may not be expecting.
• Consider visually distinguishing each list item so that once the new content opens, it’s easier for the user to quickly distinguish the expanded content from the overall list.

Figure: This example (from a native Symbian application) shows the use of an expanding list to display emails grouped by date.

Tip: Visit Simple Web Runtime Design Patterns Using jQuery within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.

Tip: Visit Simple Web Runtime Design Patterns Using Dojo within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.

Tip: Visit Simple Web Runtime Design Patterns Using Mootools within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.