Question

I have a color palette:

css

.colors {width:75px;height:75px;background-color:red;border:1px solid #000;}
.highlight {width:75px;height:75px;background-color:red;border:2px solid #000;}

html

<div class="colors">Red</div>
<div class="colors">blue</div>
<div class="colors">green</div>

the user supposed to choose what color he want,
so I want the border of the the color chosen by the user to be 2px;

$("div").click(function () {
  $(this).toggleClass("highlight");
});

this is work fine, but when i click on anothe color the old color still actived and when i click on the same color becomes inactive and i don’t want that.

what i want is:

1. border change when active.
2. if i click on another one the old one becomes inactive.
3. when i click on the active one again I dono’t want something to happen i want it as it was actived.

Thank you.

Answer 1

What you want would look like this:

$("div").click(function () {
  $(this).addClass("highlight").siblings().removeClass("highlight");
});

You can test it out here. What this does is just add the class on click (not toggle it so it can come off) via .addClass() then those .siblings()get the class removed via .removeClass().

---

If your example is off and they’re not siblings, just use .removeClass() on the same selector as your .click() handler before adding it to the clicked element, like this:

$("div").click(function () {
  $("div").removeClass("highlight");
  $(this).addClass("highlight");
});