Achieving slideUp() without content distortion
<p>I want to implement a simple slide up and slide down mechanism for revealing content on the press of a button. Using the out of the box jquery functions slideUp() and slideDown() squishes the content. I want the slide mechanism to be similar to the one used in twitter (in the timeline when you click on a tweet, more info and options slide down). There the content does not get squished. Instead the bottom border seamlessly moves over the content thus sliding up without squishing. Any pointers on how to implement this?</p>

<p>Edit:</p>

<p>The content to be slided into and out of visibility is inside a div</p>

<pre><code>&lt;div id='container'&gt;
 &lt;div id='slider'&gt;
   &lt;div&gt; other content &lt;/div&gt;
 &lt;/div&gt;
 &lt;div id='button'&gt;
   Click to slide
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I listen to the click event of the 'button' div</p>

<pre><code>$('.button').click(function(){
  if($('.slider').is(":visible"))
  {
    $('.slider').slideUp();
  }
  else { $('.slider').slideDown(); }
});
</code></pre>

<p>This is a basic slider. The contents inside the 'slider' div get squished and distorted when animating.</p>
