Hello I have a form that consists of 7 accordion boxes. Inside each accordion are a set of select boxes pertaining to that accordions question.The user has to click to open the accordion and then choose the desired checkbox(es). They then click a search button and the page displays items related to their chosen criteria.

By default the accordion boxes are closed. I am wondering if I should minimize the number of clicks and have each accordion box open by default when the user comes to the page. This would save 7 clicks for the user in returning deisred search results. Thanks

  • What do the accordion boxes contain? Maybe there's a better pattern to use for your use case.. Dec 22, 2016 at 19:04
  • Each accordion consists of 5 options with a checkbox to choose that option.
    – tiki16
    Dec 22, 2016 at 19:40
  • Do they need to go through all the accordion boxes before starting the search? Dec 22, 2016 at 19:44
  • No, they can click the "show available programs" button under the accordions and it displays the total. The check boxes inside the accordions, provide a filter based on the checkbox criteria. ie how long you have been in business? checkbox option: < Less than 1 year etc.
    – tiki16
    Dec 22, 2016 at 19:59

2 Answers 2


Well, based on your description AND your own perception, you don't need accordion boxes at all. Before anything, read NN/G's research about accordions so you understand all the cons you'll be facing

So, instead of accordions, simply use Headers to separate the different sections of the form.

All this being said, if your form shows content based on conditions, then I'd go with a multi-step form to avoid confusions or people clicking on one search button before the other . Otherwise, I'd consider do a filtering first (if possible), then populate whichever fields you need in order to create this dynamic form you mention

Bottom line is: no matter the case, you don't need an accordion

  • I agree the accordions are not needed. The developer used them when building the search form. I am providing feedback and I think they are unnecessary. Thanks for the link to Neilsons.
    – tiki16
    Dec 22, 2016 at 21:03
  • I agree with the multi-step solution, @tiki16 check steppers in case they fit your case.
    – Alvaro
    Dec 23, 2016 at 12:35
  • Thanks for sharing. I don't think this will work for us.
    – tiki16
    Dec 23, 2016 at 14:51

There is a HTML tag to group fields: <FIELDSET>. I use them when I have a lot of fields in a form to group them by meaning. Is a simple way to preserve space and have a neat and uncluttered form.

Why do we need a fieldset?

I place a <LEGEND> tag with a class (toggle) and then make this toggle class to show this fieldset and hide the others with some javascript code.

First set active

Third set active

You can make the fieldsets to show or hide as user progresses through the form. You are not limited to clicking the headers and you don't need to follow the accordion design at all.

  • Thanks for sharing. Do you have links to working examples?
    – tiki16
    Dec 23, 2016 at 14:50

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.