title: click on image to add or remove class
body: <p>I have a bunch of images and I want to add / remove a border and a box shadow on click.
  I thought it would be very simple, but it seems i am overlooking something here.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;img class='unselected' src='/images/dot.en.hc.png' alt='dot' title='dot' /&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$('img').click(function() {
      if ($(this).hasClass("selected")) {
          $(this).removeClass('selected').addClass('unselected');
      } else {
          $(this).removeClass('unselected').addClass('selected');
      }
  });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.selected {
      border: 2px solid #0F0;
      box-shadow: 0px 0px 3px 2px #0F0;
      transition: border 0.2s, box-shadow 0.2s;
  }
  .unselected {
      border: 2px solid #FFF;
      box-shadow: 0px 0px 0px 0px #0F0;
      transition: border 0.2s, box-shadow 0.2s;
  }
  </code></pre>
  
  <p>EDIT: as the code above seems to be fine, I am printing here the full code that I have on the website (I just started this little site now to test few things, so it is quite empty):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script&gt;
  $('img').click(function() {
      if ($(this).hasClass("selected")) {
          $(this).removeClass('selected').addClass('unselected');
      } else {
          $(this).removeClass('unselected').addClass('selected');
      }
  });
  &lt;/script&gt;
  &lt;style&gt;
  img {
      max-width: 50px;
  }
  .selected {
      border: 2px solid #0F0;
      box-shadow: 0px 0px 3px 2px #0F0;
      transition: border 0.2s, opacity 0.2s, filter 0.2s;
      opacity: 1;
      filter: alpha(opacity = 100);
  }
  .unselected {
      border: 2px solid #FFF;
      box-shadow: 0px 0px 0px 0px #0F0;
      transition: border 0.2s, opacity 0.2s, filter 0.2s;
      opacity: 0.8;
      filter: alpha(opacity = 80);
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form method="post" enctype="multipart/form-data" action="link.php"&gt;
  &lt;input type="hidden" name="log" value="1"/&gt;
  &lt;img class='unselected' src='/images/dot.en.hc.png' id='dot.en.hc' alt='dot.en.hc' title='dot.en.hc' /&gt;
  
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>