Accordion (GUI)

In a graphical user interface, an accordion is , usually vertical, list of items (or window labels, or thumbnails) with atmost one of them expanded into regular window(without a frame). Those items are stacked on on top of each other. Window is "expanded" or "stretched" below (or next to if accordion is horizontal) the activated item.

The term stems from the musical accordion in which sections of the bellows can be expanded by pulling outward.

A common example of a GUI accordion is the Show/Hide operation of a box region, but extended to have multiple sections in a list.

An accordion is related to a tabbed interface, is, usually horizontal, list of items where at exactly one is expanded into a window . Shortcuts to access separate windows).

Developer definition

Several buttons or labels stacked up on each another. At most one of them can be "active", having window, which it "binds" (which is attached to him), opened. This window is usually constrained by width of labels. When opened it shifts labels under clicked label down according to height of that window. If there is any window from this "stack" opened already it is closed. That way only one window is opened inside of this stack.

Of coures there can be scrollbars. And that stack of windows can be thought as window itself.

Purpose

• Brings windows together which ought to have some relation to each other.
• One window available at a time to reduce information "overload" only one window is "opened".
• Unavailable windows are "shortcutted" / shaded to make choice faster. Chat program Google Talk rewrites window labels to indicate important states like "someone is writing" ...
• All windows stacked on each other toghether - 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, an open section is typically closed. However, note that in a musical accordion all sections of the bellows can be expanded by pulling outward.

Examples

A common example using a GUI accordion is the Show/Hide operation of a box region, but extended to have multiple sections in a list.

As of June, 2007, the front page of Brown University's website (here) is dominated by an accordion provided by the JQuery, a framework for JavaScript.

SlideVerse is an accordion interface providing access to web contents.

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 or click.

Apple.com has some roll-over accordions. For example (as of Dec 2008), the left column of the page includes three categories that expand on roll-over: "All Downloads," "Top Apple Downloads," and "Top Downloads."

External links

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