title: Onclick toggle selected div's class and change unselected divs' classes too
body: <p>here's what I have so far.
  <a href="http://jsfiddle.net/nSfWs/" rel="nofollow">http://jsfiddle.net/nSfWs/</a></p>
  
  <p>Right now when a user clicks on a product div, the green box appears by adding the class "selected" to the product div. What I'd like to also happen is for the class "unselected" to be added remaining two unselected product divs. Therefore, one div would have the green box/border and the other two would be faded with the opacity filter.</p>
  
  <p>Can someone help me make this work? It seems simple enough, but it's driving me crazy. Thanks!</p>
  
  <p>And for those who don't want to click on the jsfiddle link, here's the code.</p>
  
  <pre><code>&lt;style type='text/css'&gt;
      div.product {
      display:inline-block;  
      vertical-align:top;
      text-align:center;
      width:auto;
      margin:0 47px 0 0;
      padding:24px 22px 20px 27px;
      border:1px solid transparent;
      }
  
      div.product:last-child {
      margin:0px;
      }
  
      div.product:hover {
      border:1px solid #878787;
      -moz-border-radius:3px;
      border-radius:3px;
      }
  
      div.product.unselected {
      opacity:0.6;
      filter:alpha(opacity=60);
      }
  
      div.product.selected {
      border:1px solid #32a24e;
      -moz-border-radius:3px;
      border-radius:3px;
      }
  &lt;/style&gt;    
  &lt;script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
      $(window).load(function(){
          $(".product").click(function () {
              $(this).toggleClass("selected");
          });
      });//]]&gt;
  //]]&gt;  
  
  &lt;/script&gt;
  
  &lt;div class="product"&gt;
      &lt;div class="itemImage"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="Model 11710" width="85" height="146" /&gt;&lt;/div&gt;
      &lt;div class="description"&gt;1&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="product"&gt;
      &lt;div class="itemImage"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" alt="Model 11710" width="85" height="146" /&gt;&lt;/div&gt;
      &lt;div class="description"&gt;2&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="product"&gt;
      &lt;div class="itemImage"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0f/Plectrophenax_nivalis1.jpg/320px-Plectrophenax_nivalis1.jpg" alt="Model 11710" width="85" height="146" /&gt;&lt;/div&gt;
      &lt;div class="description"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>