only clicked div shall have different color

Question

I have 4 divs, I only want the clicked div to change the border color, but if another one is clicked it shall change back. At the moment the color stays after clicking:

jsfiddle

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

JS

$('.box').on('click', function(e){
 e.preventDefault();
$(this).css('border-color', 'lime');
});

Answer 1

$('.box').on('click', function(e){
 e.preventDefault();
$('.box').css('border-color','');
$(this).css('border-color', 'lime');
});

Answer 2

You can remove the css style from all the elements and assign it again to the current element on each click. which is simple but I prefer using two variables which holds the current element and the previous element objects something as shown below:

var cur;  //represents current element
var pre;  //represents previous element

$('.box').on('click', function (e) {
    e.preventDefault();
    if (pre) //checking for first time condition
        pre.css('border-color', 'red');  
    cur = $(this);
    cur.css('border-color', 'lime');
    pre = cur;  //assigning the current element to previous element
});

Working Fiddle

JSPERF

Answer 3

Try this: Live DEMO (Read the comments)

$('.box').on('click', function(e){
  $('.box').css('border-color', 'red');//set all borders value to the default
  e.preventDefault();
  $(this).css('border-color', 'lime');//change the selected border value
});

Answer 4

Try this

$(".box").click(function() {
   $(".box").removeClass("active");  // remove active class from all
   $(this).addClass("active");         // add active class to clicked
});

DEMO

Answer 5

Try like this

$('.box').on('click', function(e){
$('.box').css({'border-color':'blue','border':'solid 1px red'});
$(this).css('border-color', 'lime');
});

See Demo

Answer 6

A chained example using classes.

$(".box").click(function() {
   $(this).addClass("active").siblings('.box').removeClass("active"); 
});

http://jsfiddle.net/CkwQU/13/

Answer 7

You just need to set the border colour of all the boxes before you set the new border colour:

$('.box').on('click', function(e){
 e.preventDefault();
$('.box').css('border-color', 'black');
$(this).css('border-color', 'lime');
});

Answer 8

You could do this with the following code.

CSS:

div.box{
    width:100px;
    height:30px;
    background:#ccc;
    margin:3px;


}

.box.border{
    border:1px solid #ff0000;
}

JS:

$(".box").on("click", function () {
    if (!$(this).hasClass("border")) {
        $(".border").removeClass("border");
        $(this).addClass('border');
    }
});

Demo here - http://jsfiddle.net/cb7mH/

Answer 9

This is the proper way i think

$('.box').on('click', function(e){
    e.preventDefault();
  // Lime color
  if($(this).css('border-left-color') == 'rgb(0, 255, 0)')
  {
   $(this).css('border-color', 'red'); 
  }
  else
  {
    $(this).css('border-color', 'lime');
  }
});

Answer 10

You need to reset the border of all other divs.

  $('.box').css('border-color', 'red');

Have updated you fiddle..