title: Jquery - Highlight all divs with same class when link clicked
body: <p>I am trying to setup something using jQuery which will allow me to select a color from a list of links and have it highlight all divs that have this color as a class.  This is what I have so far...</p>
  
  <pre><code>&lt;ul class="mybuttons"&gt;
      &lt;li&gt;&lt;a href="#" class="link red"&gt;Red&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="link green"&gt;Green&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="link yellow"&gt;Yellow&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="link blue"&gt;Blue&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="link orange"&gt;Orange&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="test red blue"&gt;Red - Blue&lt;/div&gt;
  &lt;div class="test blue"&gt;Blue&lt;/div&gt;
  &lt;div class="test yellow"&gt;Yellow&lt;/div&gt;
  &lt;div class="test blue yellow"&gt;Blue - Yellow&lt;/div&gt;
  &lt;div class="test orange"&gt;Orange&lt;/div&gt;
  &lt;div class="test red"&gt;Red&lt;/div&gt;
  &lt;div class="test yellow"&gt;Yellow&lt;/div&gt;
  &lt;div class="test green blue"&gt;Green - Blue&lt;/div&gt;
  &lt;div class="test orange"&gt;Orange&lt;/div&gt;
  &lt;div class="test yellow"&gt;Yellow&lt;/div&gt;
  &lt;div class="test green"&gt;Green&lt;/div&gt;
  &lt;div class="test blue"&gt;Blue&lt;/div&gt;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>$( ".link.blue" ).click(function() {
   $(".test.blue").toggleClass("main");
   $(".link.blue").toggleClass("active");
  });
  
  $( ".link.red" ).click(function() {
  $(".test.red").toggleClass("main");
  $(".link.red").toggleClass("active");
  });
  
  $( ".link.yellow" ).click(function() {
  $(".test.yellow").toggleClass("main");
  $(".link.yellow").toggleClass("active");
  });
  
  $( ".link.orange" ).click(function() {
  $(".test.orange").toggleClass("main");
  $(".link.orange").toggleClass("active");
  });
  
  $( ".link.green" ).click(function() {
  $(".test.green").toggleClass("main");
  $(".link.green").toggleClass("active");
  });
  </code></pre>
  
  <p>-</p>
  
  <pre><code>.test{height:30px;width:250px;background:lightgrey;margin-bottom:10px;border:black 1px solid;text-align:center}
  
  .link{opacity:.5;}
  .main{background:blue;color:white;}
  .active{opacity:1;}
  
  .link.red{background:red;color:white;width:50px;height:30px;text-decoration:none;}
  .link.green{background:green;green:white;width:50px;height:30px;text-decoration:none;}
  .link.yellow{background:yellow;color:black;width:50px;height:30px;text-decoration:none;}
  .link.blue{background:blue;color:white;width:50px;height:30px;text-decoration:none;}
  .link.orange{background:orange;color:white;width:50px;height:30px;text-decoration:none;}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/box7ddu/q0f7w8zj/" rel="nofollow">http://jsfiddle.net/box7ddu/q0f7w8zj/</a></p>
  
  <p>It almost works, but if you highlight all of the colours then not all of the divs are highlighted,  also, i'm pretty sure the way I am doing it is not the most efficient.  Can anyone see what I am doing wrong?</p>