title: Absolutely Positioned Elements Do Not Animate with Jquery SlideToggle in ie7
body: <p>I have a hidden section in my HTML that is shown and hidden on button press using JQuery's 'slideToggle' function.</p>
  
  <p>This button is below the hidden content and animates happily with all browsers but ie7, is there a way to force it to animate without having to rewrite the button so that it's not positioned absolutely?</p>
  
  <pre><code>&lt;div class="hiddenContent"&gt;
  &lt;p&gt;Hidden content is in here&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="showmorecontainer"&gt;
  &lt;a class="showmore" href="#"&gt;SHOW&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks</p>
  
  <p>I've added some CSS and JQuery for context (note the HTML above was simplified)</p>
  
  <p>CSS -
      .showmorecontainer{
      height:24px;
      }</p>
  
  <pre><code>.showmore{
  position:absolute;
  left:0px;
  bottom:0px;
  height:22px;
  background-image:url('../images/showmore.png');
  background-repeat:no-repeat;
  width:330px;
  display:block;
  padding-left:195px;
  padding-top:2px;
  }
  </code></pre>
  
  <p>JQuery - </p>
  
  <pre><code>$(".showmore").click(function(e) {
      $(this).parent().parent().find('.hiddenContent').slideToggle('slow',      function() {
          if($(this).is(":hidden")){
              $(this).parent().find('.showmore').html('SHOW ME MORE');
              $(this).parent().find('.arrow').removeClass('arrowup');
          }
          else{
              $(this).parent().find('.showmore').html('CLOSE BACK UP');
              $(this).parent().find('.arrow').addClass('arrowup');
          }
      });
      e.preventDefault();
  });
  </code></pre>