Accordion (GUI): Difference between revisions
remove pointless link |
m →External links: Task 17 - remove UTM parameters (Google analytics) from URLs |
||
| (10 intermediate revisions by 7 users not shown) | |||
| Line 1: | Line 1: | ||
{{short description|Expandable GUI element containing vertically stacked list of items}} |
{{short description|Expandable GUI element containing vertically stacked list of items}} |
||
{{ |
{{more citations needed|date=September 2014}} |
||
[[File:Free psd ui kit sleek accordion menu by melaychie-d5fb2d9.png|thumb|Accordion widget]] |
[[File:Free psd ui kit sleek accordion menu by melaychie-d5fb2d9.png|thumb|Accordion widget]] |
||
| Line 7: | Line 7: | ||
The term stems from the musical [[accordion]] in which sections of the bellows can be expanded by pulling outward. |
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 of a box region, but extended to have multiple sections in a list. |
A common example of an accordion is the Show/Hide [[Inference|operation]] of a box region, but extended to have multiple sections in a list. |
||
An accordion is similar in purpose to a [[tabbed interface]], a list of items where exactly one item is expanded into a [[Panel (computer software)|panel]] (i.e. list items are [[File shortcut|shortcut]]s to access separate panels). |
An accordion is similar in purpose to a [[tabbed interface]], a list of items where exactly one item is expanded into a [[Panel (computer software)|panel]] (i.e. list items are [[File shortcut|shortcut]]s to access separate panels). |
||
| Line 19: | Line 19: | ||
SlideVerse is an accordion interface providing access to web content.<ref>{{cite web|url=http://hypotext.webs.com/slideverse.htm |title=SlideVerse - A Different Look at the Internet |accessdate=2008-10-25 |url-status=dead |archiveurl=https://web.archive.org/web/20090203043904/http://hypotext.webs.com/slideverse.htm |archivedate=2009-02-03 }}</ref> |
SlideVerse is an accordion interface providing access to web content.<ref>{{cite web|url=http://hypotext.webs.com/slideverse.htm |title=SlideVerse - A Different Look at the Internet |accessdate=2008-10-25 |url-status=dead |archiveurl=https://web.archive.org/web/20090203043904/http://hypotext.webs.com/slideverse.htm |archivedate=2009-02-03 }}</ref> |
||
The list view of Google Reader also features this. |
The list view of [[Google Reader]] 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]] in the [[Internet Archive]], the left column of the page includes three categories that expand on roll-over: "All Downloads", "Top Apple Downloads", and "Top Downloads".<ref>https://web.archive.org/web/20080430124840/https://www.apple.com/downloads/</ref> |
In an early example, Apple's download page used roll-over accordions in 2008. In this example, captured in the [[Wayback Machine]] in the [[Internet Archive]], the left column of the page includes three categories that expand on roll-over: "All Downloads", "Top Apple Downloads", and "Top Downloads".<ref>{{cite web |url=https://www.apple.com/downloads/ |title=Apple - Downloads |website=www.apple.com |access-date=12 January 2022 |archive-url=https://web.archive.org/web/20080430124840/https://www.apple.com/downloads/ |archive-date=30 April 2008 |url-status=dead}}</ref> |
||
==See also== |
==See also== |
||
| Line 34: | Line 34: | ||
*[https://web.archive.org/web/20111008042954/http://mootools.net/demos/?demo=Accordion mootools] Tutorial (where the effect is called ''sliding shelf'') on [https://web.archive.org/web/20070524055359/http://www.monfx.com/journal/2006/08/01/sliding-ajax-shelf-the-code-behind-the-mask/ MONFX] |
*[https://web.archive.org/web/20111008042954/http://mootools.net/demos/?demo=Accordion mootools] Tutorial (where the effect is called ''sliding shelf'') on [https://web.archive.org/web/20070524055359/http://www.monfx.com/journal/2006/08/01/sliding-ajax-shelf-the-code-behind-the-mask/ MONFX] |
||
*[https://web.archive.org/web/20070602102134/http://www.ajaxdaddy.com/demo-interface-accordion.html Accordion Interface] Demo of an accordion script |
*[https://web.archive.org/web/20070602102134/http://www.ajaxdaddy.com/demo-interface-accordion.html Accordion Interface] Demo of an accordion script |
||
*[https://apps.shopify.com/product-description-accordion Shopify Accordion] Shopify product description accordion |
|||
{{Graphical control elements}} |
{{Graphical control elements}} |
||
Latest revision as of 18:48, 13 February 2024
 | This article needs additional citations for verification. (September 2014) |
The accordion is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. 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 of a box region, but extended to have multiple sections in a list.
An accordion is similar in purpose to a tabbed interface, a list of items where exactly one item is expanded into a panel (i.e. list items are shortcuts to access separate panels).
User definition[edit]
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.
Examples[edit]
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.[1]
The list view of Google Reader 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 in the Internet Archive, the left column of the page includes three categories that expand on roll-over: "All Downloads", "Top Apple Downloads", and "Top Downloads".[2]
See also[edit]
- Code folding, a similar technique applied to text
References[edit]
- ^ "SlideVerse - A Different Look at the Internet". Archived from the original on 2009-02-03. Retrieved 2008-10-25.
- ^ "Apple - Downloads". www.apple.com. Archived from the original on 30 April 2008. Retrieved 12 January 2022.
External links[edit]
- jQuery UI accordion widget
- YourHead
- mootools Tutorial (where the effect is called sliding shelf) on MONFX
- Accordion Interface Demo of an accordion script
- Shopify Accordion Shopify product description accordion