Question

In my program I have 3 divisions with class ‘information’, ‘interest’ and ‘wall’.
I want this divisions to change their color when a a user clicks on it.
Initially all 3 division classes have same color #dcdcdc.
When user clicks on 1 of them I want to change its color to #999, but color of other divisions must remain #dcdcdc.

This much part is working correctly but when i click on 2nd division, the previous doesn’t change its color back to #dcdcdc.

JavaScript part.

$(document).ready(function(){
 $('#pro_head > div').click
 (
  function() 
  {
   $(this).css("background-color", "#999");
   $(this).css("font-weight", "bold");
  },
 );
});

HTML part:

<div pro_head>
  <div class="information"></div>
  <div class="interest"></div>
  <div class="wall"></div>
</div>

Answer 1

CSS

.selected {
   background-color: #999;
   font-weight : bold;
}

JS

$(document).ready(function(){ 
  var divs1 = $('#pro_head1 > div'), /* I'm guessing selectors */
      divs2 = $('#pro_head2 > div'), 
      addHandler = function(divs) {
         divs.on('click', function() { 
            divs.removeClass('selected');
            $(this).addClass('selected');
         }); 
      };

 addHandler(divs1);
 addHandler(divs2);

})

The idea is to create a special class that has to be applied on the selected division (and removed elsewhere). In this way you could manage complex style without specifying all css rules inside JS and you can better identify presentational layer from functional layer

Edit: updated after user request in a comment.