I'm designing a multi-step accordion form flow for a package shipping process. The users fill out their "to" and "from" information easily in separate accordion sections, but the third section contains multiple steps within it for the user to fill out.

Does anyone have ideas on how to display this elegantly? Making it one long scrolling section is an option, but it might be too much scrolling for some users' tastes.

  • Welcome to UXSE. A visual mock up would help us understand your problem a lot better as it's not that clear what you're asking about. Commented Jun 29, 2018 at 6:39

2 Answers 2


It's hard to say without the context, but an accordion inside another accordion seems excessive.

Accordion section label usually gives a brief overview of it's content. So the user will only be informed about the first level and could probably miss the important details inside the second accordion level.

I'd rather map the whole process linear, if it's possible. enter image description here


According to this article, from NN Group:

Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. Better to show all page content at once when the use case supports it. In such cases, don’t worry too much about page length. Relevance trumps page length.

With that said, I think you should consider not using accordion for the "to" and "from" part of your screen, and maybe a Stepper component for the last part. But, like Anton said, it is difficult to see what would be better without the context.

Your Answer

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

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