I have a data tree that looks like this:

enter image description here

The blue button in the header is the master toggle button to expand or collapse all items in the tree.

The issue raised that I'm not sure the best way to approach is:

If the user has partially opened the data tree like above, by clicking the mater toggle button should this make the entire tree collapse or expand? Or should I have two separate buttons, one for collapsing the tree and one for expanding?

1 Answer 1


Use two separate unambiguous controls, and you can use text labels for clarity.

Toggling on and off is confusing, and the icon you're using looks more like a org chart icon turned sideways...

This way you avoid the problems that come with toggle buttons, in which the state change is unclear, and using text for labels instead of icons doesn't make the user guess.

See this icon usability article.

Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

I would skip the icons for now, and just use text.


download bmml source – Wireframes created with Balsamiq Mockups

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.