Accordion (GUI)

Briefly

Accordion is a view (by window or thumbnail) of 1 item inside of a list of items.

Similar to

Tabbed interface. Which is a view (window) of 1 item outside of a list of items (there shortuts to windows).

Developer definition

Accordion is 1 view of an item inside of a (mostly fixexd size) list of N items. Those items are usually represented by some icon or text-button (tab). View (of those items) is just like another window, but it is inside of a list (of those items) - can be also imagined as very large item. Which implies the list has to be large enought to contain it.

Note that window inside of a list can have scrollbars.

Purpose

Purpose of accordion is to encompass the shortcuts (list of items)) together with their presentation (window). And do it so that they are very close to each other. See fitts law for further information about it.

User definition

An accordion is a graphical user interface widget in which several sections of a document can be expanded or collapsed, displaying one at a time. Whenever a section is selected for opening, the open one is closed.

As of June, 2007, the front page of Brown University's website (here) is dominated by an accordion.

The list view of Google Reader also features this.

Design Options

To open one section of the accordion, the designer can choose to have it operate on either:

• roll-over
• click

Apple.com has some roll-over accordions. For a sample (as of Sept 2007), see the narrow columns of the page that include "Top TV Shows on iTunes, Top Movies on iTunes."

External links

• Accordion Widget for Ext JS - JavaScript Library Live Demo with Howto integrate the widget to a web page
• Your head
• ASP.NET AJAX Control Toolkit
• HedgerWow DHTML Widget: Accordion Menu 2.0
• mootools Tutorial (where the effect is called sliding shelf) on MONFX
• Accordion Interface Demo of an accordion script