title: Active and Inactive DIVs using jQuery
body: <p>I have a color palette:</p>
  
  <p>css</p>
  
  <pre><code>.colors {width:75px;height:75px;background-color:red;border:1px solid #000;}
  .highlight {width:75px;height:75px;background-color:red;border:2px solid #000;}
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div class="colors"&gt;Red&lt;/div&gt;
  &lt;div class="colors"&gt;blue&lt;/div&gt;
  &lt;div class="colors"&gt;green&lt;/div&gt;
  </code></pre>
  
  <p>the user supposed to choose what color he want,
  so I want the border of the the color chosen by the user to be 2px;</p>
  
  <pre><code>$("div").click(function () {
    $(this).toggleClass("highlight");
  });
  </code></pre>
  
  <p>this is work fine, but when i click on anothe color the old color still actived and when i click on the same color becomes inactive and i don't want that.</p>
  
  <p>what i want is:</p>
  
  <ol>
  <li>border change when active.</li>
  <li>if i click on another one the old one becomes inactive.</li>
  <li>when i click on the active one again I dono't want something to happen i want it as it was actived.</li>
  </ol>
  
  <p>Thank you.</p>