title: Performing a function on selected element, and a different function on all other elements of same class?
body: <p>I have a set of three <code>&lt;div&gt;</code> elements, of which one is "selected" on page load (giving it a different colored border). I'm trying to have it such that if a different <code>&lt;div&gt;</code> of the same class is clicked, that that particular one receives the new border color while the other two revert to their default grey border.</p>
  
  <p>I have my JS like this:</p>
  
  <pre><code>  $('.container').click(function(){
      $(this).css('border','2px solid #ffffff');
      $(this).siblings().css('border','2px solid #e3e3e3');
    });
  </code></pre>
  
  <p>I've also tried using <code>.not()</code> with the same result of the code not behaving as expected.</p>
  
  <p>Simplified HTML here:</p>
  
  <pre><code>&lt;div class="container"&gt;Some Content&lt;/div&gt;
  &lt;div class="container"&gt;Some Content&lt;/div&gt;
  &lt;div class="container"&gt;Some Content&lt;/div&gt;
  </code></pre>
  
  <p>The first line works, but the second line doesn't give the element's siblings the different border color. I've looked online but no solutions are giving me what I need. Any help?</p>