 <p>You can't do it with jQuery's <code>.slideUp()</code> and <code>.slideDown()</code> function because it animates <code>height</code> of the element. However you can add <code>class</code> on <code>click</code> and use css <code>transform</code> for styling them.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#slide").click(function() { $("#top, #bottom").toggleClass('hidden'); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.slide { position: relative; height: 100px; background-color: yellow; overflow: hidden; } .slide .innerTop, .slide .innerBottom { transition: transform 0.25s linear; transform: translateY(0); } .slide .innerTop { position: absolute; top: 0px; } .slide .innerTop.hidden { transform: translateY(-100%); } .slide .innerBottom { position: absolute; bottom: 0px; } .slide .innerBottom.hidden { transform: translateY(100%); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;button id="slide"&gt;slide it&lt;/button&gt; &lt;div id="slidebottom" class="slide"&gt; &lt;div class="innerTop" id="top"&gt;Slide from top&lt;/div&gt; &lt;div class="innerBottom" id="bottom"&gt;Slide from bottom&lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>