When is it bad practice to use an accordion control?

I've been using Accordion controls in many design situations...

I find them useful for:

• Progressive disclosure of long wizards (reduces number of pages)


• Questionnaires where you want to be able to show answers or exit quickly (see diagram below)


• Checkouts e.g. www.johnlewis.com

I wonder why these patterns are not more popular. I can see the advantages... what are the disadvantages?

A question on UX SE recently mentioned that such controls are falling out of favour... is that true? If so what are the alternative design patterns?

UPDATE Found some interesting information in the question tabs vs accordions. But doesn't address disadvantages of this technique.

UI Patterns have some useful things to say about accordion controls. I also liked Rahuls answer on the "How to handle a very long accordion" question.

Answer

I don't think accordions are falling out of favour and while I haven't seen them being used as commonly as tabs, they are still used on some prominent sites.

Here's an example of the "General Account Settings" page on facebook.

However, there are a few disadvantages, which is why I only use accordions when the following apply:

• 
  

  If expanding a section causes a lot of scrolling, I tend to avoid the accordion, because that means the user needs to scroll and search for the next section to click and open. This can be aleviated by having a close button for each section and a "next" button for each section, if the flow proceeds in a linear fashion.

  
  


• 
  

  If the process is linear and the text in each accordion's header is quite short, then perhaps tabs might be more useful for navigating back and forth:

  
  

With amazon's example, the "tabs" aren't clickable because they want to enforce the flow of the checkout process, but if required, you can make them clickable so that users can easily go back to a previous screen.

In summary:

• 
  

  Accordions are good. They can be implemented with pure css as with stoicfury's answer. Finally, a lot of javascript frameworks come with accordion widgets: JQuery and YUI just to name a few, so implementation should be quite straight forward.

  
  


• 
  

  If the accordion contains a lot of panes, resulting in a lot of scrolling, then perhaps the accordion is not such an appropriate widget. For example, if it contains so many items, will the user have the need to go back and revisit any previous steps?

  
  


• 
  

  Accordions are good if you do not have panes or if each pane is quite small. The facebook example is a good example of the accordion being executed very well.The mockup you have posted is also a very good implementation, however, if each pane is to become more complex and involve larger forms, then the accordion wouldn't be able to cope with it too well.