Show/hide div and scroll to it

Question

When the user click on the form I am trying to show and hide a form and also trying to scroll down to see the form, the code that I have works after the first click. If i click for the first time it "shows the form but doesn't scroll down" after the first click it work fine. can someone explain me what am i doing wrong.

   $('#showForm').click(function()
               {
                $('.formL').toggle("slow"); 
                $('.formL').get(0).scrollIntoView()
               }); 

HTML:

<div class="formL" style="display: none">
    <form action="">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form> 
</div>

Answer 1

The problem is that in that function you try to scroll to the form while it's still not visible. To fix this, call scrollIntoView() in the callback of toggle() function. See the example here: https://jsfiddle.net/ux0qt5nn/