Make Accordion Menus Clear with One Action

An accordion is a section that opens to show more information when selected. Designers often use small icons to show that this action is available. But choosing an icon is only one part of making the control clear. The article says the relationship between the label and icon also matters. Users should not need to guess which part they must tap.

Research discussed in the article shows that people often tap both parts. They may select the words or the icon with similar frequency. If the words open a new page but the icon expands a menu, mistakes can happen. This is called a split control because one row has two different actions. The article recommends avoiding this arrangement for accordions.

Instead, tapping the main category should open its menu and show the available options. A link to the category page can appear inside that menu. If an item only takes users to another page, underline its text. It does not need an extra arrow to explain that it is a link. This keeps navigation and expansion easier to tell apart.

Different icons can also carry meanings that are unrelated to opening an accordion. A plus sign might mean adding to a cart, saving, or zooming in. An arrow might suggest scrolling, sliding, or moving to another part of a page. A custom icon may make the action even harder to understand. An icon's direction alone does not guarantee that people will understand its purpose.

The article recommends starting with a caret or triangle pointing down. After interaction, it can point up or sideways to show a changed state. Plus and minus signs can also work as an alternative. However, the whole control should still have one clear purpose. A simple icon works best when the surrounding label and action support the same meaning.