You can see the implementation here: http://jsfiddle.net/BMWZd/8/

What I am trying to do, when you click on 'John Brown', you see the first element at top turn black. When you click it again, the border of the dotted circle disappears, then when you click 'John Brown' again, you see something else, then finally once again it all disappears.

What I am trying to achieve is when you click it once, everything turns black (like it does now), then you click it again, everything disappears and goes back to the original state.

Important distinction, what I mean is...when one of the names in the box are not clicked. So if you clicked John Brown then moved to Jack Dorsey, the #1 at top should stay black. But if you were to click Jack Dorsey again, i.e. you 'unclicked' it, then it should disappear.

Also, how do I tighten it up, so that it responds quicker. Now when you click it, it feels like there is a little bit of a lag between when it was clicked and when it responds.

Edit1: If anyone is interested...the UI that this will be used in is for my webapp - http://www.compversions.com