CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Elton
Elton

Reputation: 435

Why does div content jump after slide effect

  <style>
  #toggle {
    width: 150px;
    height: 50px;
    background: crimson;
    color: white;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<body>
<button id="clickme">Click moi</button>
<div id="toggle">
  <p>This will slide in and out.</p>
</div>

<script>
$( document ).ready(function() {
  $('#clickme').click(function () {
    $( "#toggle" ).toggle( "slide" );
  });
});
</script>

The height of the #toggle div should be constant before/during/after the slide effect. For some reason the div slides out and then the height increases to 50px. I wanted to know why this is happens.

Upvotes: 4

Views: 305

Answers (3)

cracker
cracker

Reputation: 4906

Try This

$(document).ready(function() {
  $('#clickme').click(function () {         
    $("#toggle" ).toggle("slide");
  });
});

I have changed the jquery reference and also the css part

Demo1

Demo2

Upvotes: 0

Soufiane
Soufiane

Reputation: 96

the problem is Paragraphe margin , if you set paragraphe P margin to 0 , it will work perfectly 

  p { margin: 0; }

That's will solve your problem

Upvotes: 1

redditor
redditor

Reputation: 4266

Removed p as it wasn't required for this example. It's works, see here:

http://jsfiddle.net/3bVZy/

If you require p, let me know.

EDIT For the same distance, in this example, add the following to your #toggle CSS:

  position: relative;
  top:15px;

Upvotes: 1

Related Questions