title: How to use sprite images in html/css and toggle change with jQuery
body: <p>I am trying to use it this way:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#sprite2 {
     background: url(../images/csg_sprite.png) no-repeat top left;
  }
  
  .collapse_down{ background-position: 0 0; width: 16px; height: 16px; } 
  .collapse_up{ background-position: 0 -66px; width: 16px; height: 16px;  } 
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="sprite2"&gt;&lt;span id="splink1" class="collapse_down"&gt;Defaults&lt;/span&gt;
  </code></pre>
  
  <p><strong>CHANGE by jQuery</strong></p>
  
  <pre><code>$('#splink1').attr("class", 'collapse_up');
  </code></pre>
  
  <p>The problem I face is that the image is applied for the div=sprite2 and not for the span I want for.</p>
  
  <p>How to fix so on the left of the text to display the sprite, and when I toggle it, to change the image to up.</p>