Element jumps when using jQuery slideToggle

javascript, jquery

Solution

Give `padding:0` and `margin:0` or Add custom margin and padding to `<h2>` because they have default margins and that is causing jump behavior in your `slideToggle()`.

h2{
   margin:0;
   padding:0;
}

Here is the demo having `<h2>` tag with custom margin and padding

Problem

So, first #metext_hiddentext is hidden until you press #btn_more_metext and then height: 50% will be overwritten by height: auto. jquery: ``` <script type="text/javascript"> $( document ).ready(function() { $('#metext_hiddentext').hide(); $('#btn_more_metext').click(function(){ $('#me').css( "height", "auto" ); $('#metext_hiddentext').slideToggle('slow'); }); }); </script> ``` html: ``` <div id="me"> <div id="me_content"> <div id="meimg"></div> <div class="metext"> <h1>I'm Lazor Zombie</h1> <h2>Lorem ipsum dolor sit amet.</h2> <div id="metext_hiddentext"> <h2>Lorem ipsum dolor sit amet.</h2> </div> <div id="btn_more_metext">...</div> </div> </div> ``` css: ``` #me { background: #ff8400; height: 50%; } #btn_more_metext { font: 20px/10px "Rosario", 'Ubuntu', sans-serif; cursor: pointer; width: 80px; height: 35px; line-height: 22px; } ```

Original source