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

Question

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

What I'm trying to do, when you click "John Brown", you see the first element on the black top bar. When you click it again, the dotted circle border will disappear, and then when you click John Brown again, you will see something else, and then finally it will all disappear.

What I'm trying to achieve is when you press once, everything turns black (as it is now), then you press it again, everything disappears and returns to its original state.

The important difference, I mean ... when one of the names in the field is not clicked. Therefore, if you click on John Brown, then move to Jack Dorsey, No. 1 at the top will remain black. But if you clicked on Jack Dorsey again, that is, you “unzipped” him, then he should disappear.

Also, how do I tighten it so that it responds faster. Now, when you click on it, it seems that there is a slight lag between when it was pressed and when it is responding.

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

Answer 1

http://jsfiddle.net/timmywil/BMWZd/23/ . , .

Answer 2

, / .dash-elem-selected .bc-dotted-to-solid . .dash-elem-selected, , / , . , (.. "on"), (.. "" ).

$(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' });
    });
});

.dash-elem-selected color: black ( - , ), , .