Accordion (GUI)
Encyclopedia
In a graphical user interface
, an accordion is a vertically stacked list of items (e.g. labels or thumbnail
s). 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 window
s).
. 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 scrollbar
s.
", 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.
SlideVerse is an accordion interface providing access to web contents.
The list view of Google Reader also features this.
Apple 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".
Graphical user interface
In computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
, an accordion is a vertically stacked list of items (e.g. labels or thumbnail
Thumbnail
Thumbnails are reduced-size versions of pictures, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words...
s). 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
Accordion
The accordion is a box-shaped musical instrument of the bellows-driven free-reed aerophone family, sometimes referred to as a squeezebox. A person who plays the accordion is called an accordionist....
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 window
Window (computing)
In computing, a window is a visual area containing some kind of user interface. It usually has a rectangular shape that can overlap with the area of other windows...
s).
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 windowPaned window
A paned window is a window that is divided into sections known as panes. Originally, the meaning pertained to sectioned glass windows in walls.Computer scientists have adopted the term "pane" to refer to parts of sectioned windows on a graphical display...
. 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 scrollbar
Scrollbar
A scrollbar is an object in a graphical user interface with which continuous text, pictures or anything else can be scrolled including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or viewport...
s.
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" / shadedWindowShadeWindowShade was a control panel for the Mac OS that allowed a user to double-click a window's title bar to "roll up" the window like a windowshade...
to make choice faster. ChatOnline chatOnline chat may refer to any kind of communication over the Internet, that offers an instantaneous transmission of text-based messages from sender to receiver, hence the delay for visual access to the sent message shall not hamper the flow of communications in any of the directions...
program Google TalkGoogle TalkGoogle Talk is a freeware voice over Internet protocol client application offered by Google Inc. The first beta version of the program was released on August 24, 2005...
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.
User definition
Several windows are stacked on each other. All of them are "shadedWindowShade
WindowShade was a control panel for the Mac OS that allowed a user to double-click a window's title bar to "roll up" the window like a windowshade...
", 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
Accordion
The accordion is a box-shaped musical instrument of the bellows-driven free-reed aerophone family, sometimes referred to as a squeezebox. A person who plays the accordion is called an accordionist....
are displaced around top or bottom edge. Only one is expanded at a time.
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.SlideVerse is an accordion interface providing access to web contents.
The list view of Google Reader also features this.
Apple 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".
External links
- 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