Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.
Mobile Web Design Pattern: Expanding List
This design pattern is part of the Mobile Web Design Patterns series.
A series of list items that (each) expand when clicked to reveal additional related content.
- 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).
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.
If page refresh is needed this becomes less useful.
- 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 Nokia Developer Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.
Tip: Visit Simple Web Runtime Design Patterns Using Dojo within the Nokia Developer Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.
Tip: Visit Simple Web Runtime Design Patterns Using Mootools within the Nokia Developer Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.