title: Toggle class on multiple elements
body: <p>I have the below unordered list</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="item"&gt;Link 1&lt;/li&gt;
  &lt;li class="item"&gt;link 2&lt;/li&gt;
  &lt;li class="item"&gt;Link 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am currently using the following javascript to toggle the class <code>"open"</code> to any <code>&lt;li&gt;</code> element with the "item" class referenced.</p>
  
  <pre><code>  $(document).ready(function(){
        $('.item').click(function(){
          $(this).toggleClass('open');
        });
      });
  </code></pre>
  
  <p>I would like to make it so that the class <code>"open"</code> can only be applied to one <code>"item"</code> element at a time.</p>
  
  <p>Therefore for example: If the user clicks <code>"Link 2"</code> after having already clicked <code>"Link 1"</code>. <code>"Link 1"</code> would lose the <code>"open"</code> class and the <code>"open"</code> class would be attributed to "Link 2".</p>