title: Adding and removing classes not working
body: <p>I've used this exact code on a different div element and it works perfectly. When I went to add the same code to another div element with a different id it registers the element has been clicked but it doesn't add or remove any of the classes.</p>
  
  <pre><code>$('#quoteClick').click(function(){
      $('#cbox-1').addClass('displayCboxBackground');
      $('#cbox-2').removeClass('displayCboxBackground');
      $('#cbox-3').removeClass('displayCboxBackground');
  
      $('#dbox-1').addClass('displayBlock');
      $('#dbox-2').removeClass('displayBlock');
      $('#dbox-3').removeClass('displayBlock');
      console.log("clicked");
  });
  </code></pre>
  
  <p>The html structure is as follows:</p>
  
  <pre><code>&lt;div id="cbox-1"&gt;
      &lt;div id="dbox-1"&gt;
           content...
      &lt;/div&gt;
  &lt;/div&gt;    
  &lt;div id="cbox-2"&gt;
      &lt;div id="dbox-2"&gt;
           content...
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="cbox-3"&gt;
      &lt;div id="dbox-3"&gt;
           &lt;div id="quoteClick"&gt;
               a quote
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/m81c23cx/1/" rel="nofollow">https://jsfiddle.net/m81c23cx/1/</a></p>
  
  <p>In the fiddle you can see the content will changes when each header is clicked. When the "quoteClick" element is clicked I want it to change to the second headers content exactly how it does when the second header is clicked.</p>
  
  <p>I can see in Chrome's console that when I click the div element that it highlights all the classes but it doesn't change any of them.  I have the jQuery inside a <code>document.ready()</code> function so it should be waiting for the DOM to load and it works perfectly when I just write the lines into the console.</p>