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. Thanks for all your past and future contributions.

Revision as of 15:43, 5 May 2009 by jaaura (Talk | contribs)

Mobile Web Design Pattern: Expanding List

From Wiki
Jump to: navigation, search

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.


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).


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.


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.

65 page views in the last 30 days.