Accordion (GUI) on:
[Wikipedia]
[Google]
[Amazon]
The accordion is a
jQuery UI accordion widgetmootools
Tutorial (where the effect is called ''sliding shelf'') o
MONFX
Demo of an accordion script {{DEFAULTSORT:Accordion (Gui) Graphical user interface elements Graphical control elements
The accordion is a graphical control element
A graphical widget (also graphical control element or control) in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direc ...
comprising a vertically stacked list of items, such as labels or thumbnail
Thumbnails are reduced-size versions of pictures or videos, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words. In the age of digital images, visual search engines and image- ...
s. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item 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 an accordion is the Show/Hide operation
Operation or Operations may refer to:
Arts, entertainment and media
* ''Operation'' (game), a battery-operated board game that challenges dexterity
* Operation (music), a term used in musical set theory
* ''Operations'' (magazine), Multi-Man ...
of a box region, but extended to have multiple sections in a list.
An accordion is similar in purpose to a tabbed interface
In interface design, a tab is a graphical user interface object that allows multiple documents or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface s ...
, a list of items where exactly one item is expanded into a panel
Panel may refer to:
Arts and media Visual arts
*Panel (comics), a single image in a comic book, comic strip or cartoon; also, a comic strip containing one such image
* Panel painting, in art, either one element of a multi-element piece of art ...
(i.e. list items are shortcut
Shortcut may refer to:
Navigation
* Rat running or shortcut, a minor-road alternative to a signposted route
* File shortcut, a handle which allows the user to find a file or resource located in a different directory or folder on a computer
* ...
s to access separate panels).
User definition
Several windows are stacked on each other. All of them are "shaded
Shading refers to the depiction of depth perception in 3D models (within the field of 3D computer graphics) or illustrations (in visual art) by varying the level of darkness. Shading tries to approximate local behavior of light on the object'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.
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 content. The list view ofGoogle Reader
Google Reader was an RSS/Atom feed aggregator operated by Google. It was created in early 2005 by Google engineer Chris Wetherell and launched on October 7, 2005, through Google Labs. Google Reader grew in popularity to support a number of progr ...
also features this.
In an early example, Apple's download page used roll-over accordions in 2008. In this example, captured in the Wayback Machine
The Wayback Machine is a digital archive of the World Wide Web founded by the Internet Archive, a nonprofit based in San Francisco, California. Created in 1996 and launched to the public in 2001, it allows the user to go "back in time" and s ...
in the Internet Archive
The Internet Archive is an American digital library with the stated mission of "universal access to all knowledge". It provides free public access to collections of digitized materials, including websites, software applications/games, music ...
, the left column of the page includes three categories that expand on roll-over: "All Downloads", "Top Apple Downloads", and "Top Downloads".
See also
*Code folding
Code or text folding, or less commonly holophrasting, is a feature of some graphical user interfaces that allows the user to selectively hide ("fold") or display ("unfold") parts of a document. This allows the user to manage large amounts of tex ...
, a similar technique applied to text
References
External links
jQuery UI accordion widget
Tutorial (where the effect is called ''sliding shelf'') o
MONFX
Demo of an accordion script {{DEFAULTSORT:Accordion (Gui) Graphical user interface elements Graphical control elements