slideToggle: problem with positioning of the to be increased DIV box

slideToggle: problem with positioning of the to be increased DIV box

Hello,

I'm using jQuery version 2.1.3 and the slideToggle function.

During the sliding effect, the div box "mycontainer" in the example below is increasing but not correctly:

at the beginning, the div box will be increased to its maximum height. At the end, the complete div box is moved some pixels upwards. It looks like that the box will be repositioned at the end - or - the upper left corner at the beginning of the sliding down effect is not correctly calculated.

Here a HTML sample:

  1. <!DOCTYPE html>
    <html>
    <head>
    <style>
  2. ol.c {
        list-style-type: upper-roman;
    }
  3. </style>
  4. <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
  5. <script>
  6. $( document ).ready(function() {
      $( "#clickme" ).click(function() {
        $( ".mycontainer" ).slideToggle( "slow", function() {
  7.     // Animation complete.
  8.      });
       });
    });
  9. </script>
  10. </head>
    <body>
  11. <button id="clickme">Click me!</button>          
  12.              
    <h3> Headline</h3>
    <div class="mycontainer">
      <p>Sliding text</p>
    </div>
  13. <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>

  14. </body>
    </html>