title: Toggle class on Multiple Elements with UI Feedback
body: <p>I have a list (spaces just for visual clarity):</p>
  
  <pre><code>&lt;li class="a"&gt;      A     &lt;/li&gt;
  &lt;li class="b"&gt;      B     &lt;/li&gt;
  &lt;li class="c"&gt;      C     &lt;/li&gt;
  &lt;li class="a b"&gt;    A B   &lt;/li&gt;
  &lt;li class="a c"&gt;    A C   &lt;/li&gt;
  &lt;li class="b c"&gt;    B C   &lt;/li&gt;
  &lt;li class="a b c"&gt;  A B C &lt;/li&gt;
  </code></pre>
  
  <p>I have a series of 'controls':</p>
  
  <pre><code>&lt;a class="show-a" href="#"&gt;A&lt;/a&gt;
  &lt;a class="show-b" href="#"&gt;B&lt;/a&gt;
  &lt;a class="show-c" href="#"&gt;C&lt;/a&gt;
  &lt;a class="show-all active" href="#"&gt;ALL&lt;/a&gt;
  </code></pre>
  
  <p>I have some CSS: </p>
  
  <pre><code>li           {color: red; }
   .deactivate {color: #ddd; }
  a            {color: #ddd; }
   .active     {color: blue; }
  </code></pre>
  
  <p><strong>I want to do two things:</strong> </p>
  
  <ol>
  <li><p>When the corresponding <code>&lt;a&gt;</code> control is clicked, add/remove the <code>.deactivate</code> class to the respective <code>&lt;li&gt;</code>s. e.g. if <code>.show-a</code> is clicked, apply <code>.deactivate</code> to all the elements without an <code>.a</code> class. And, thus, remove the <code>.deactivate</code> class from any <code>&lt;li&gt;</code>s that no longer require it.</p></li>
  <li><p>Reflect the current selection in the controls. i.e. add/remove the <code>.active</code> class to the respective anchor links. (this is the part I can never find an answer for). </p></li>
  </ol>
  
  <p><strong>NOTE:</strong> </p>
  
  <ul>
  <li>Only one control can be <code>.active</code> at any given time. Like radio buttons, but more style-able via CSS.</li>
  <li>It seems like the better solutions out there use jQuery and toggleClass.</li>
  </ul>
  
  <p><strong>RE Other Answers:</strong> there are many (e.g. <a href="http://jsfiddle.net/Cx4uK/2/" rel="nofollow">http://jsfiddle.net/Cx4uK/2/</a>) but </p>
  
  <ul>
  <li>none that address #2 </li>
  <li>most show/hide rather than toggle a class</li>
  <li>very few are explained, and so it's hard to iterate on the answers and understand how they work (which is my ultimate goal). </li>
  </ul>