I have a page with a number of accordions on the page that are used to group certain items together and take up less screen space.

I want the user to know to have to go through each accordion to complete this step.

I have thought about having text above stating 0 complete of 4 etc and then having an icon to show complete / not complete.

I would love to hear your thoughts...

  • Does the accordion have to default to being closed? Why not start in an open state? Jul 31, 2012 at 16:53
  • 1
    So this is really more like a Wizard with steps that can be completed out of order, right? Why don't you treat it more like a Wizard than an accordion? It's a very common pattern. Do you have an image example of how it looks?
    – Ben Brocka
    Jul 31, 2012 at 16:54
  • 1
    Opinion: don't make it an accordion. I believe the only reason the Stack Exchange FAQs are like this is to enable gamification of the FAQ (for the Analytical badge ux.stackexchange.com/badges/73) and for that, you need some active interaction. Otherwise, why make me click more?
    – msanford
    Jul 31, 2012 at 19:02

4 Answers 4


I think it makes sense to expand the first accordion by default so that users can start typing right away without clicking any controls. If the user has to go through each accordion you can reveal the next accordion if the user filled in the previous accordion. When the user fills in an accordion and clicks Submit the next accordion opens up and the previous accordion becomes read only with a control to make it editable. Apple checkout uses the same approach. Accordions, created in Axure LukeW wrote a very nice article about accordion design that is accompanied by the user tests. Accordions that had a primary control (e.g. Continue to move on) performed faster than accordions where the user had to click an accordion header. Also the accordion performed faster than a multi-page wizard.

  • 1
    +1 Notwithstanding my personal bias against accordion design, testing > my opinion. :)
    – msanford
    Jul 31, 2012 at 19:03

The short answer: Don't use accordion. It's better to group elements visually. If the form is a huge one, use steps.

Early websites actually punished people if they made the error of clicking on something else than form fields. Usually a clicked link caused a the page to fully reload and all the work was lost. Sad days for users. So basically people have been taught never to click anything else than the field or risk losing your work.

When users are filling out forms, they generally don't expect they should click anything else than the actual form they see. Using accordion in forms only works for situations where you choose the right section first and then only fill that part.


Consider the control objectively. Ask yourself how the user normally interacts with the type of accordion you envision and then see if that interaction fits the scenario.

These are the characteristics of an accordion:

  • few panels
  • first one is optionally open on start
  • click header to open an accordion panel (optionally close all others)
  • click any header in any order, no dependency
  • information in panels not dependent (i.e. no restriction on which panel you can view in what order)

If this is not what you want, either don't use an accordion or don't make it look like an accordion (i.e. headers might not look like something I'd want to click).

Here's an idea:

I just used a good form to register for a course. It had an accordion-looking left panel with green checkmarks for ones I've done. They were not labeled as steps. The middle panel showed form for each panel.

I started in a workflow with the first. At each "step" I could "Save and continue". If I left and returned to the site, home page said "Resume registration where you left off...". However, at any time I could click any of the panels in any order to fill in any of the information. The checkmarks on the left made it clear which steps I completed and what is left. When I completed all of them, it wasn't really clear what to do (I think this could've been done better). So I either clicked the home page or a new step appeared... I can't recall. In any case, I was now at a page showing a submit/confirmation/you're done content and button.

I think something like this is a good way to create workflow that is clear but also flexible. There was no confusion because it didn't really look like an accordion, but I liked the ability to fill in info in any order and go back directly without traditional Next/Prev pagination.


If you have to use an accordion (which, as others indicated, is just not suitable for this workflow) and actual completion is more important than order of entry (i.e. there are no inter-compartmental dependencies), you could include a "completeness" indicator on each tab header / accordion title that tells the user that this compartment requires further data.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.