I have an element on HTML that can be clicked, and its related content can be displayed/hidden right under it. It is common to indicate an element's folded state by (and expanded state by ), but I am using triangle for something else in my UI, so I want some other way to indicate that an element is folded and is expandable. What good ways are there? Perhaps some other character/symbol, changing the color, or the background color come to my mind, but I am not sure what is good.

  • 1
    By the way, I like your use of "folded." I've always used "expanded" and "collapsed," but that might change now. – Ken Mohnkern Mar 20 '16 at 13:35

You'll want symbols that lots of people understand already. Users shouldn't have to learn anew what your symbols mean. So your first step might be to find the established conventions. So look at other sites and see what they do.

Having said that, off the top of my head I first think of plus and minus: [+] and [–]. Or you can use triangles, but make them look significantly different from your existing ones. Maybe [>] instead of filled triangles.

| improve this answer | |
  • Plus and minus feel right. – sawa Mar 20 '16 at 14:09
  • Thanks. I think my other point is valid too: unfilled triangles that are (for example) smaller, in a different color, and located within the folding area should provide enough context to say that these are not those other triangles. – Ken Mohnkern Mar 20 '16 at 14:11

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.