Accordion Martijn van Welie
Collapsible Panels The user needs to find an item in the main navigation Accordions are often used as part of or subnavigation. If used for navigation it is conceptually equivalent to . Alternative to . Although accordions are often used as part of a I strongly recommend against it since it is worse than regular implementations from a usability point of view. Accordions can be a good way to implement a where it opens up each question. Another good use would be to manage settings. The number of panels should be small, e.g. < 10.
From ASP net Stack panels vertically or horizontally and open up one panel at the time while collapsing the other panels 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.
  If more than 1 panel is allowed to be opened it becomes like or .
• Users can select other panels by clicking on the panel header

The vertical opening panels are usually for display sub-menu items, while horizontal opening panels are suitable for large content areas. When implementing the accordion it is important to get the following aspects right:

• Animate the opening of panels so that users get feedback about what is happening. The animation should be subtle which means that it should last no more than 250ms
• Allow navigation using the keyboard up and down keys
• Highlight the current panel so the user can distinguish open panel headers form closed panel headers
• Make sure the total size of the accordion can grow or shrink in size. Some implementations fix the heigt of each panel which leads to undesirable situations when panels contain only little content.

An accordion is useful for compressing many elements in a compact space. The elements can be properties, questions or simply navigation items. The downside is, of course, that most items get hidden which may not be very desirable when you use accordions for main navigation. Accordions originate from Macromedia applications such as Dreamweaver where they were first used.

The vertical ones are quite common although they do not always animate nicely. The horizontal ones like the one used in the Xbox 360 is far less used. It is not the best solution from a classic usability perspective but it can add to the fun element of the user experience. 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:
Outlook web access http://www.rrallen.com/ DHTML Accordion Menu 2.0 ASP.NET: Accordion Sample
Spry: Accordion Sample
Accordion implementations can be found in nearly every AJAX toolkit: YUI, ASP.NET, Rico, Spry Kevin Hoyt: Thoughts on Accordion Usability