- Accordion (GUI)
In a
graphical user interface , an accordion is an expanded view (bywindow orthumbnail ) of a selected item inside of a list of items. The term stems from the musicalaccordion 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.A GUI accordion is related to a
tabbed interface , which is a view (window) of a selected item outside of a list of items (using theirshortcuts to access separate windows).Developer definition
An accordion is one view of an item inside of a (mostly fixed-size) list of N items. Those items are usually represented by some icon or text-button (
tab ). View (of those items) is just like anotherwindow , but it is confined inside of a list (of those items) - can be also imagined as a very large item, which implies that the list has to be large enough to contain it.Note that the region inside of the list can have scrollbars.
Purpose
The purpose of an
accordion is to encompass theshortcuts (list of items) together with theirpresentation (window), in a manner so that they are very close to each other. SeeFitts 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 musicalaccordion 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 ( [http://www.brown.edu/ here] ) is dominated by an accordion provided by theJQuery , a framework forJavaScript .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.
[http://www.apple.com/itunes/ 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
* [http://www.i-marco.nl/weblog/yui-accordion/ YUI Accordion widget] Built with the YUI framework. Includes live demo.
* [http://www.aesthetic-design.co.uk/accordion] accordion for scriptaculous.
* [http://aariadne.com/accordion Accordion Widget] for [http://extjs.com Ext JS - JavaScript Library] Live Demo with Howto integrate the widget to a web page
* [http://www.yourhead.com/accordion/index.html Your head]
* [http://ajax.asp.net/ajaxtoolkit/Accordion/Accordion.aspx ASP.NET AJAX Control Toolkit]
* [http://www.hedgerwow.com/360/mwd/accordion/demo.php HedgerWow] DHTML Widget: Accordion Menu 2.0
* [http://demos.mootools.net/Accordion mootools] Tutorial (where the effect is called "sliding shelf") on [http://www.monfx.com/journal/2006/08/01/sliding-ajax-shelf-the-code-behind-the-mask/ MONFX]
* [http://www.downloadjavascripts.com/Vertical_Accordion_Panel.aspx Accordion Examples]
* [http://www.ajaxdaddy.com/demo-interface-accordion.html Accordion Interface] Demo of an accordion script
Wikimedia Foundation. 2010.
