Design patterns. GUIdebook: Graphical User Interface gallery. Accordion Problem The user needs to find an item in the main navigation Solution Stack panels vertically or horizontally and open up one panel at the time while collapsing the other panels From ASP net Use when Accordions are often used as part of Main Navigation or subnavigation. How Many different variations of the Accordions exisit, both vertical ones and horizontal ones but the crucial aspects of the implementation are: Only 1 panel is open at one time. Why An accordion is useful for compressing many elements in a compact space. The vertical ones are quite common although they do not always animate nicely. More Examples At the Donna's body vison , an accordian is used for displaying subnavigation without requiring a page-reload: At Pixellab a small accordion is used to display several recent projects in a very small area: At Daniel Richards a horizontal accordion is used to give the site a non-conventional feel: The XBox 360 interface also uses a horizontal accordion: Implementation Literature.
UI Design Pattern Library. UI-Patterns.com.