We all know how accordion work, as set by the web. You have a list of items, each containing sub content.

We also know that the standard for accordion is to have a single interaction on the top items: click to open/close to reveal or hide the content within.


Have you ever seen or designed an accordion that has two target area (see design for clarification)? Can you see something wrong with this?

enter image description here

2 Answers 2


Having two target actions on accordion will always create confusion for the users.

The proper convention for the accordion is that the whole accordion is clickable and the item expands if the user clicks anywhere on the accordion row.

If the action which you are trying to perform relates to selecting a particular List item, then I suggest showing radio options parallel to the accordion rows. For example:

enter image description here

And if you want to add the list item specific action then, you should include it inside the content area of the expanded list item. For example:

enter image description here

If your content can be longer then you can stick the actions to the top. For example:

enter image description here

  • Hi Sheraz, thanks for your comment. option 1 could work is part of a form. A radio group implies that after the selection a submit is available to proceed with that selection. Option 2 is more in line with what I can get, however it has a drawback the visibility and discoverability of that action...you will need to scroll in order to see it. I my case the accordion will reveal a list of thinks that could potentially be quite long.
    – Taritaro
    Sep 13, 2018 at 11:34
  • @Taritaro I have updated my answer in response to your comment. Kindly check.
    – Sheraz
    Sep 13, 2018 at 12:03

It's a typical case and can be found very often in some "install app wizard".

But if it's mobile app better put expand/collapse and toggle in different edges, for example: expend/collapse List Item Label toggle control.

It will reduce mistakes when user what tap one control but picked another one because it was too close

software wizard

  • This is one of the designs sketched as alternative. The thing that is bugging me is hierarchy of action: what's the key task the user is trying to perform? Somehow I feel that two items positioned next to each other imply equal importance. You can either click on the '+' to expand the content or click this icon here to open something else related to this item. Would you agree with that? Could this be used as an argument to discourage such a design?
    – Taritaro
    Sep 13, 2018 at 11:38

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.