Controls that expand and collapse

As web pages become more dynamic, behaviors seen in desktop applications have found their way on to the web. One of the most common behaviors is expanding/collapsing an element.

OS file browsers have long used tree controls to allow users to open and close branches of a file hierarchy.

Windows XP uses a "plus/minus" control. The plus indicates there is more available under branch; the minus indicates the branch is open:

Mac OS X uses a "triangle" control. When the branch is closed the triangle points to the right; when the branch is closed the triangle points down.

   

Vista uses a variation of the triangle control. In the closed state, the points to the right, but is rendered in outlined only. When the branch is open, the triangle points at a 45-degree angle and is filled:

The web uses variations of Windows XP "plus/minus" control and the Mac OS X "triangle" control.

Google Reader uses a plus/minus control:

Yahoo Mail uses a triangle control:

The above examples are controlling the display of lists.  In traditional desktop software triangle controls are commonly found open and close palettes, such as those found in Adobe Photoshop:

On the web, this same idea is often seen with web page widgets, as with this example from Netvibes:

Interestingly, iGoogle uses more of a window minimize/maximize metaphor for its widgets. The placement of this control is also on the right side of the widget, similar to the window controls in Windows XP or Vista.

There is one other related convention that is worth mentioning, which is controls to hide/show menus. On the web, this control is commonly represented as a down-pointing triangle, as show in these examples from iGoogle and Netvibes.

Interestingly, pallets in desktop software often use a right-pointing triangle at the end of the widget to display a menu (as shown in this Photoshop example):