Kinsting Lab - A Dynamic SHOW/HIDE Indicator
Problem:
With Web content that appears as a hierarchy (tree), lengthy content typically makes use of "SHOW/HIDE" mechanism. This provides the user with the ability to show or hide portions of the hierarchy via "SHOW/HIDE" icons or controls at the left edge of specific lines.
These icons/controls appear typically as PLUS and MINUS glyphs or DOWN-ARROW/RIGHT-ARROW images.
Here (below) is a screenshot (from this kinstingcreations.com site itself) showing such an example of this SHOW/HIDE mechanism...
Clicking upon a "RIGHT-ARROW" control will cause the line's sub-contents to be revealed. Also, that "RIGHT-ARROW" upon which you clicked will appear as a "DOWN-ARROW", indicating that the subcontents is SHOWN.
The problem is that this show/hide mechanism might not be intuitive for the non-technical user. How is he to know to click upon that control? How is he to know that clicking upon the control will 'morph' it to it's alternate state?
Solution:
My proposed solution would be to give the user some visual feedback whenever he hovered over the RIGHT- or DOWN-ARROW controls.
What about if we supplied a "hover" image that was somehow half-way between RIGHT and DOWN? What if we showed that hover image as an arrow pointing 45 degrees down (clockwise) from the RIGHT-ARROW orientation? Said another way, we could show an arrow that points to the SouthEast!
Here is my working implementation of this mechanism. Go ahead. Click! Hover! Try it out!...
 
Here is my solution HTML...
Here is my solution CSS...
Here is my solution JavaScript...
A few notes about the above code...
  • Note the use of the classes angledFromRight and angledFromDown. Why not just have one class, calling it angled? While you can try it (and I invite you to do so), you will soon see (looking at the final jQuery JavaScript code), that you need to have a history of whether this angled presentation "came from" a DOWN-ARROW state or a RIGHT-ARROW state.
  • Yes, I probably could have saved a small bit of code by writing the click handler code as a switch statement.
  • As a final improvement, I might add THE LOWERING OF SUBSQUENT LINES - relative to the current ARROW line - just a few pixels upon hover. This would give the user an additional mental "nudge" that something more is going to happen if he proceeds with clicking upon the ARROW.