title: Jquery change opacity of div on click
body: <p>I've read various questions about this matter but I didn't found a solution for my particular case.
  I need to change opacity of the thumbUp and thumbDown divs when they are clicked. Why does my code not work?</p>
  
  <p>Thank you.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="foto"&gt;
          &lt;img src="images/feu.jpg"&gt;
      &lt;/div&gt;
      &lt;div id="descrizione"&gt;
          &lt;p class="title"&gt;Feu d'artifice&lt;/p&gt;
          &lt;p&gt;Giacomo Balla&lt;br&gt;
             1916-1917&lt;br&gt;
          &lt;/p&gt;
          &lt;div id="likeButtons"&gt;
              &lt;p&gt;Ti piace quest'opera?&lt;/p&gt;
              &lt;img id="thumbUp" src="images/thumbup.png"&gt;
              &lt;img id="thumbDown" src="images/thumbdown.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="pulsanteOpera" class="pulsante" style="padding: 30px 20px 0 0;float:right;"&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#likeButtons{
  position:relative;
  right:-50%;
  width:500px;
  overflow:hidden;
  font-weight:300;
  margin-bottom:50px;
  } 
  
  #likeButtons p{
  float:left;
  }
  
  #likeButtons img{
  width:10%;
  margin-bottom:30px;
  padding-left:10px;
  float:left;
  cursor:pointer;
  }
  
  #thumbUp,#thumbDown{
  opacity:0.6;
  }
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(e) {
          $('#pulsanteOpera').click(function(){
      $(this).toggleClass('pulsante').toggleClass('pulsanteRimuovi');
          });
      $('#thumbDown').click(function(){
              if($(this).css('opacity')==0.6)
          $(this).css('opacity','1.0');
          else
          $(this).css('opacity','0.6');
      });
      });
  &lt;/script&gt; 
  </code></pre>