Why does the following Toggle function perform four different operations instead of two?

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

http://jsfiddle.net/timmywil/BMWZd/23/ I only made steps one and two work. I'm sure you can take it from there.

The first toggle function runs every other click, so you add/remove .dash-elem-selected and .bc-dotted-to-solid every other click. Two .dash-elem-selected, followed by two off, plus solid/dotted borders every other click gives you four states. Since you're already using separate functions, have one add classes (i.e. set the "on" state) and the other remove them (i.e. set the "off" state).

$(document).ready(function() {
    $('#panels tr table tr').toggle(function () {
        var $this = $(this),
            tr_class = 'dash-elem-selected';
        if (!$this.parent('thead').length) {
            $this.addClass(tr_class).siblings().removeClass(tr_class);
            var idx = $.trim($this.parents('td table').siblings('.sit-in-the-corner').text());
            var spans = $('#bc' + idx + ' span');
            spans.addClass('bc-dotted-to-solid');
            spans.filter('.dashed-circle').css({ 'border' : '5px solid #000'});
        }
    }, function() {
        var $this = $(this);
        var idx = $.trim($this.parents('td table').siblings('.sit-in-the-corner').text());
        var spans = $('#bc' + idx + ' span');
        spans.removeClass('bc-dotted-to-solid');
        spans.filter('.dashed-circle').css({ 'border' : '5px dotted #bdbebf' });
    });
});

The .dash-elem-selected class needs a color: black (or somesuch, but that's in line with the rest of the design), to show that a particular item has been selected.