var a = document.getElementById('a');
var b = document.getElementById('b');
b.style.cursor = 'pointer';
a.style.cursor = 'pointer';
a.onclick = function() {
  $("#a").css("background-color", "red");
};
b.onclick = function() {
  $("#b").css("background-color", "yellow");
};

<script src=".1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

var a = document.getElementById('a');
var b = document.getElementById('b');
b.style.cursor = 'pointer';
a.style.cursor = 'pointer';
a.onclick = function() {
  $("#a").css("background-color", "red");
};
b.onclick = function() {
  $("#b").css("background-color", "yellow");
};

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

I want to add background-color css to the div i click and again clicking on the same dive it should remove the BG color.

Here i wrote the code as getting id statically. I may get many div in future so i need to get the div id dynamically. like something $this.id bla bla... please help me. Thank u..

• javascript
• jquery
• html
• css

• Give all your div elements a class on which you want to add this highlighting option. – philantrovert Commented Dec 9, 2016 at 5:51
• Which language are you using? as you said it will be dynamic and you may get many div, that means its in for loop. so which language will you use for that? – rushil Commented Dec 9, 2016 at 5:53
• also which colers do you want? here you have shown 2 colours , red and yellow. – rushil Commented Dec 9, 2016 at 5:54
• 1 A sidenote: IDs should have to be unique for each element in a single page. – Jai Commented Dec 9, 2016 at 5:56
• jsfiddle/bq1hewvs/3 – Mahi Commented Dec 9, 2016 at 5:56

4 Answers 4

You can use toggleClass to toggle between highlight and unhighlight

$('div').click(function(){
  $(this).toggleClass('red');
});

 $('div').click(function(){
      $(this).toggleClass('red');
    });

.red {
  background:red;
  }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

or use a data attribute to store your colors:

$('div').click(function(){
      $(this).css('background',$(this).attr('data-color'));
  $(this).toggleClass('default');
    });

.default {
  background:#fff!important;
  }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default" id="a" data-color="red">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="default" id="b" data-color="yellow">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="default" id="b" data-color="blue">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

Try with toggleClass() And b is two times there so use with class and apply with .each() .It will apply the each class of b .

$(document).ready(function(){
$('#a').click(function(){
$(this).toggleClass("red");
})

$('.b').each(function(){
  $(this).click(function(){
$(this).toggleClass("yellow");
})
  })
})

div{
  
  cursor:pointer;
}
.red{
  background-color:red;
 }
.yellow{
  background-color:yellow;
 }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

Added toggleClass on .red class

a.onclick = function() {
    $("#a").toggleClass("red");
};

And style

<style>
.red {
  background-color:red;
}
</style>

https://jsfiddle/bq1hewvs/1/

if you want to use pure javascript, you don't need library just add this only and add css .blue { background:#06C;}

var a = document.getElementById('a');
var b = document.getElementById('b');
b.style.cursor = 'pointer';
a.style.cursor = 'pointer';
a.onclick = function() {
var myButtonClasses = document.getElementById("a").classList;
   if (myButtonClasses.contains("blue")) {
      myButtonClasses.remove("blue");
   }else {
      myButtonClasses.add("blue");
   }
};
b.onclick = function() {
  var myButtonClasses = document.getElementById("b").classList;
    if (myButtonClasses.contains("blue")) {
      myButtonClasses.remove("blue");
    }else {
      myButtonClasses.add("blue");
    }
};