If I have 3 <tr> elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

Might be a bit difficult to understand based on the description but the JSFiddle is here: h开发者_运维问答ttp://jsfiddle.net/n8a76/4/

Basically what I want it to do, when you click on any of the elements in the first 3 boxes, I only want one element to be highlighted at a time. If you click on two or three elements (names, projects, etc) right now, it highlights all two or three. It only unhighlights an element when you click it again.

So I would like to see, click element 1, element 1 is highlighted. Click element 2, element 1 (in the same box) is unhighlighted, and element 2 is highlighted.

So each box, from my code it is called a dashed-panel, should be independent of the other.

So in theory, John Brown and Jack's App UI could be highlighted at the same time.

Anyone have any suggestions?

You can just remove the class from th sibling <tr> elements in the same table, like this:

$(document).ready(function() {
  $('#clients table tr, #stages table tr, #projects table tr').click(function() {
    $(this).toggleClass('dash-elem-selected').siblings().removeClass('dash-elem-selected');
  });    
});

You can test it out here, this still allows toggling on/off as well.