title: Reset default CSS from jQuery
body: <p>I am using a grid layout (Bootstrapper) to display images of a certain width in rows.</p>
  
  <pre><code>&lt;li class="span4"&gt;&lt;div id="id" class="thumbnail"&gt;&lt;img src="**path**"&gt;&lt;img&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;li class="span12"&gt;&lt;div id="id-2" class="thumbnail"&gt;&lt;img src="**path**"&gt;&lt;img&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;li class="span3"&gt;&lt;div id="id-3" class="thumbnail"&gt;&lt;img src="**path**"&gt;&lt;img&gt;&lt;/div&gt;&lt;/li&gt;
  </code></pre>
  
  <p>I'd like to be able to make an image's width span all columns (class="span12") when a user clicks on the image and to revert the image back to the "hardcoded" class of the image when the user clicks on the image again.</p>
  
  <pre><code>if (current_span != 'span12') // If image is not already spanning all columns ("span12")
  {
  $(this).attr('class','span12'); // Add class to span all columns
  }
  </code></pre>
  
  <p>Using the above JS, images are displaying with the correct width after one click.</p>
  
  <p>However, on the second click I'd like to revert back to the "hard-coded" class since not all images have the same class (i.e., some belong to 'span3', others to 'span4' and other to 'span12'.</p>
  
  <p>Is there a way to revert back to the "hardcoded" class from the HTML on the second click?</p>