This might be considered a sort of special case of the issue described here: Which way should arrows point in a collapsible accordion? Left/down … down/up?

I have this scenario:

enter image description here

As can be seen in the illustration, my current design is inconsistent with the approach taken in Windows Explorer (and OSX Finder for that matter, just with other arrow icons).

So my question is:

  • How to communicate that HEADLINE 1.1 controls the collapse-states of the contents of it's subheadlines and not if the subheadlines themselves are visible?

UPDATE: Here's a live example.

2 Answers 2


I would not use a treeview. (A) Use HEADLINE 1.1 and HEADLINE 1.2 as a headline with the option "EXPAND ALL". Below you placed the tree with the collapsible SUBHEADERS. (B) There are too many elements then you can also split the tree in 2 views (first is a list and second a tree).


  • Thanks for your input! In my design (and it may not be clear from the arrow "overload" in the illustration, I know...) I have defined the HEADLINE 1.1/HEADLINE 1.2 behaviour as a two-state toggle, instead of a three-state toggle or one-shot operation as you suggest? That is, only if all subheadlines are collapsed, HEADLINE 1.1 expands all. Else HEADLINE 1.1 collapses any expanded subheadlines. Mixing two-state toggles (subheadlines) and three-state toggles is rather confusing, I think. The reason for me using icons concerns the fact that text-links/buttons quickly bloats the interface.
    – agib
    Nov 24, 2011 at 15:45
  • You can also use a icon instead of text for the command "EXPAND ALL". But the treeview metapher in your concept is wrong.
    – sysscore
    Nov 24, 2011 at 16:06

The triangle expander control you are referencing here is described by Microsoft in their Progressive Disclosure Controls Guidelines. This particular control is the only one that displays in it's Present State (as opposed to the 'future state' i.e. the state it will be in when selected) this is because it (apparently) resembles a rotating lever so shows the direction in which the action occurred.

Rotating triangles

Purpose - Show details: Show or hide additional information in place for an individual item. They are also used to expand containers.

Appearance - Rotating triangles somewhat resemble rotating levers, so they point in the direction where the action has occurred.

Glyph Indicates - Present state

  • Thank you for the feedback and reference, although I'm not sure, how/if that answers my question. Judging from the MS guidelines, the rotating triangles can only be used to toggle individual items. In conclusion, my suggested way of using them, to display the collapse state "INSIDE" children, is wrong. But my question is then: What should I do instead?
    – agib
    Nov 29, 2011 at 15:01

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.