7

I'm working on a UI where users can toggle a button to show or hide a div. On the 1st click, the div appears below the button with a slide-down effect. On 2nd click, the div slides up to hide.

Currently I am toggling the button icon between a downward-pointing triangle icon when the button will trigger the slide-down show and an upward-pointing triangle icon when the button will trigger the slide-up hide? (Note: there's no change to the icon on hover).

Is this a suitable method to use, or is there a more appropriate implementation I should go with?

|improve this question
  • 4
    What you're describing are called disclosure arrows, progressive disclosure controls or chevron buttons. Here's a great summary from Microsoft. – Kit Grose Jul 3 '12 at 0:22
  • 1
    Adam, welcome to UX.SE. As it's currently worded, your question is out of scope and is likely to be closed because it's a "shopping list" (request for examples). Please refer to the FAQ to see what kinds of questions are allowed here. – dnbrv Jul 3 '12 at 0:25
  • 1
    Thanks for the Microsoft reference, Kit, it's great to find the term associated with that UI controls I'm working with (i.e., progressive disclosure controls/chevron buttons). Very helpful! :-) – Adam Ruf Jul 3 '12 at 2:45
  • Thanks for the welcome and FAQ link, dnbrv, I appreciate your concern. – Adam Ruf Jul 3 '12 at 2:52
  • 1
    See also this related question and especially the quite comprehensive answer by Michael Zuschlag (currently the second one) – Louise Jul 11 '12 at 6:53
6

While I cant say I have seen a website preforming the show hide function with a button; I believe the more typical convention is to preform show/hide events with the anchor (link) tag if an icon is going to be included.

Also the convention appears to be when contents are expanded to have a downward pointing arrow and when contents are contracted to have an arrow pointing to the left instead of pointing upwards. In both cases the icon is located on the left hand side of the text.

Places I have seen this concept

I believe this convention originated from the desktop world and can be seen on many of the Linux operating systems as well as on Mac. Images attached below. The windows world used plus (+) and minus (-) signs as the alternative.

enter image description here enter image description here

|improve this answer
2

When triangles are used in these cases, the triangle direction denotes the state of the node rather the action. Thus, an expanded element will have an arrow pointing down, and a collapsed one an arrow pointing right.

Reason being is that the (downward) expansion of the content is natively associated with a 90 degrees clockwise motion of the triangle (thinking animation for both the content and the triangle would help here), whereas the upward collapse is natively associated with 90 degrees anti-clockwise motion of the triangle.

|improve this answer
0

It sounds like you're describing something similar to an accordion control. If so, how about using the jQuery UI accordion control for reference? The expand/collapse button spans the width of the content, and it shows a right arrow for a collapsed section and a down arrow for an expanded section.

|improve this answer
  • Thanks for the reference, Michael. It's definitely a popular UI, so there's probably something I can learn from it. – Adam Ruf Jul 3 '12 at 2:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.