title: jQuery's toggleClass and order of class names in .css file
body: <p><strong>BACKGROUND:</strong> </p>
  
  <p>I have text with an arrow pointing to the right, clicking on the text/arrow reveals a div and substitutes the arrowRight with arrowDown.</p>
  
  <p><strong>PROBLEM:</strong> </p>
  
  <p>The problem stems from the fact that my code works depending upon the order in the .css file and I don't know why that should matter w jQuery.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.arrow{display:inline-block;  width:15px; height:10px;background-repeat:no-repeat;}
  .arrowRight{background-image:url("../graphics/triangleRight.gif"); }
  .arrowDown{ background-image: url("../graphics/triangleDown.gif");}
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="showListOfBids" class="align-c"&gt;
       List of Bids &lt;div class="arrow arrowRight"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQUERY</strong></p>
  
  <pre><code>$("#showListOfBids").click(function(){
     $(".bidList").toggleClass("show");
     $(".arrowRight").toggleClass("arrowDown");
  });
  </code></pre>
  
  <p><strong>Developer Tool > Elements</strong></p>
  
  <p>Toggling adds and removes arrowDown</p>
  
  <p>Toggle Off: </p>
  
  <pre><code>&lt;div class="arrow arrowRight"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Toggle On: </p>
  
  <pre><code>&lt;div class="arrow arrowRight arrowDown"&gt;&lt;/div&gt;  
  </code></pre>
  
  <p><strong>QUESTION:</strong> Why does the order of the class .arrowDown affect the display? AFAIK the css file isn't being reparsed when using jQuery. jQuery adds the class to the DOM and the parser just searches for that one element.</p>
  
  <p><strong>COMMENT:</strong> I don't like toggling doubling up on the classes.  Am I using it incorrectly? I was using removeClass and addClass and changed over to toggleClass</p>