Accordion (GUI)
From Wikipedia, the free encyclopedia
In a graphical user interface, an accordion is a vertically stacked list of items (e.g. labels or thumbnails). Each item can be "expanded" or "stretched" to reveal the content associated with that item. There can be zero or more items expanded at a time, depending on the configuration.
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, a horizontal list of items where exactly one item is expanded into a window (shortcuts to access separate windows).
Contents |
[edit] Developer definition
Several buttons or labels are stacked upon one another. At most one of them can be "active". When a button is active the space below the button is used to display a paned window. The pane is usually constrained by the width of labels. When opened it shifts labels under the clicked label down according to the height of that window. Only one button or pane combination can be active at any one time; when a button is selected any other active panes cease to be active and are hidden. The active pane may have scrollbars.
[edit] 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 together - see Fitts's law for further information about it.
[edit] User definition
Several windows are stacked on each other. All of them are "shaded", so only their captions are visible. If one of them is clicked, to make it active, it is "unshaded" or "maximized". Other windows in accordion are displaced around top or bottom edge. Only one is expanded at a time.
[edit] 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.
[edit] 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 December 2008), the left column of the page includes three categories that expand on roll-over: "All Downloads," "Top Apple Downloads," and "Top Downloads."
 |
This section may require cleanup to meet Wikipedia's quality standards. Please improve this section if you can. (December 2007) |
[edit] References
[edit] 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
|
|||||||||||||||||||||||
