title: jQuery .show() adds style="display:inline-block" to elements
body: <p>I'm working on a site I inherited at work that shows donation progress using progress bars / labels. The majority of the lists will have 9 years in the (e.g. 1990-1999) but the last one has 13 (2000-2012). Because of this, I have a javascript function <code>showHiddenBars()</code> which shows / hides the respective elements.</p>
  
  <p>On first load, everything displays correctly (2000-2012 is displayed by default) but after hiding them and then showing them, it messes up the layout. From what I can tell via Google Chrome's inspector is that when the <code>.show()</code> function is used it is adding <code>style="display: inline-block"</code> to my span element which houses the label. I am using the <code>clip</code> easing effect of jQuery UI with the show and hide functions.</p>
  
  <p>How do I prevent .show from adding style="display: inline-block;"</p>
  
  <p>Full Javascript: <a href="http://pastebin.com/ZmbQqwWF" rel="noreferrer">http://pastebin.com/ZmbQqwWF</a></p>
  
  <p>Full HTML: <a href="http://pastebin.com/mf6W1ahF" rel="noreferrer">http://pastebin.com/mf6W1ahF</a></p>
  
  <p>Example Site: <a href="http://kirsches.us/3000Strong/decadeProgress.html" rel="noreferrer">http://kirsches.us/3000Strong/decadeProgress.html</a></p>
  
  <p>The javascript:</p>
  
  <pre><code>function showHiddenBars() {
      "use strict";
      //show the bars we aren't using.
      $('#decade10').show("clip");
      $('#decade11').show("clip");
      $('#decade12').show("clip");
      $('#decade13').show("clip");
      $('#decade10label').show("clip");
      $('#decade11label').show("clip");
      $('#decade12label').show("clip");
      $('#decade13label').show("clip");
      $('#decade10AmountGiven').show("clip");
      $('#decade11AmountGiven').show("clip");
      $('#decade12AmountGiven').show("clip");
     $('#decade13AmountGiven').show("clip");
  }
  function hideHiddenBars() {
     "use strict";
      //hide the bars we aren't using.
      $('#decade10').hide("clip");
      $('#decade11').hide("clip");
      $('#decade12').hide("clip");
      $('#decade13').hide("clip");
      $('#decade10label').hide("clip");
      $('#decade11label').hide("clip");
      $('#decade12label').hide("clip");
      $('#decade13label').hide("clip");
      $('#decade10AmountGiven').hide("clip");
      $('#decade11AmountGiven').hide("clip");
      $('#decade12AmountGiven').hide("clip");
      $('#decade13AmountGiven').hide("clip");
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="decadeProgressContainer"&gt;
      &lt;span class="titleFontNoBorder" id="decade1label"&gt;2000&lt;/span&gt;
      &lt;div id="decade1" class="progressBarSpacingTop"&gt;&lt;/div&gt;
      &lt;span id="decade1AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade2label"&gt;2001&lt;/span&gt;
      &lt;div id="decade2" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade2AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade3label"&gt;2002&lt;/span&gt;
      &lt;div id="decade3" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade3AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade4label"&gt;2003&lt;/span&gt;
      &lt;div id="decade4" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade4AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade5label"&gt;2004&lt;/span&gt;
      &lt;div id="decade5" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade5AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade6label"&gt;2005&lt;/span&gt;
      &lt;div id="decade6" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade6AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade7label"&gt;2006&lt;/span&gt;
      &lt;div id="decade7" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade7AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade8label"&gt;2007&lt;/span&gt;
      &lt;div id="decade8" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade8AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade9label"&gt;2008&lt;/span&gt;
      &lt;div id="decade9" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade9AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade10label"&gt;2009&lt;/span&gt;
      &lt;div id="decade10" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade10AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade11label"&gt;2010&lt;/span&gt;
      &lt;div id="decade11" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade11AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade12label"&gt;2011&lt;/span&gt;
      &lt;div id="decade12" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade12AmountGiven"&gt;$130,000&lt;/span&gt;&lt;br /&gt;
  
      &lt;span class="titleFontNoBorder" id="decade13label"&gt;2012&lt;/span&gt;
      &lt;div id="decade13" class="progressBarSpacing"&gt;&lt;/div&gt;
      &lt;span id="decade13AmountGiven"&gt;$130,000&lt;/span&gt;
  &lt;/div&gt;
  &lt;!--end div #decadeProgressContainer--&gt;
  </code></pre>