Change DOM element CSS with jquery Not

Question

I have two clickable headings. When you click one, it changes blue. If you click the other one, it changes blue, but should "unclick" the other heading and change it back to black.

I'm trying to do this using jquery not ...

$("#pal1, #pal2").click(function(event) {
    $(this).css({"color" : "blue"});
    var pal1 = $(this).attr('id');
    var pal2 = $(this).next().attr('id');   
    $(this).not(pal2).css({"color" : "black"}); //if the selected heading is not pal1, or not pal2, changed the one that is not == $(this) back to black.
});

Or something like that.

---

Edit: I know I can do it this way... but wanted to use jQuery functions to reduce code size. Plus this isn't very efficient.

$("#pal1, #pal2").click(function(event) {
    $(this).css({"color" : "blue"});        
    if ($(this).attr('id') !== $("#pal1").attr('id')) {
        $("#pal1").css({"color" : "black"});
    }
    else {
        $("#pal2").css({"color" : "black"});
    }
});

Answer 1

Set both to black , then set the clicked one to blue .

$("#pal1, #pal2").click(function(event) {
  $("#pal1, #pal2").css({"color" : "black"});
  $(this).css({"color" : "blue"});
});