jquery slidetoggle is not hiding

Question

i have a login hyperlink. so when i click on it a login form with id=nd_login_form will show.

<li class="active"><a href="#nd_login_form" ><?php _e('Login', 'ninety'); ?></a></li>

this is the login link. the form is:

    <form action="<?php echo home_url(); ?>/?wcz" method="post" class="nd_form" id="nd_login_form" style="z-index:100;background:gainsboro;position:absolute;"><div class="nd_form_inner"> 

    <p><label for="nd_username"><?php _e('Username','ninety'); ?>:</label> <input type="text" class="text" name="log" id="nd_username" placeholder="<?php _e('Username', 'ninety'); ?>" /></p> 
    <p><label for="nd_password"><?php _e('Password','ninety'); ?>:</label> <input type="password" class="text" name="pwd" id="nd_password" placeholder="<?php _e('Password','ninety'); ?>" /></p> 

<input type="submit" class="button" value="<?php _e('Login &rarr;','ninety'); ?>" /> 
        <input name="nd_login" type="hidden" value="true"  /> 
                <input name="redirect_to" type="hidden" id="redirect_to" value="<?php echo nd_login_current_url(); ?>"  /> 
    </p> 
</div></form>

the jquery script i used is:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
         (function ($) { 
      $(document).ready(function() { 
             $("#nd_login_form").slideUp(); 
      $(".active").click(function () { 
         $("#nd_login_form").slideToggle("fast"); 
      }); 
  }); 
    })(jQuery); 
         </script>

So the problem is when the document is ready first the form will not appear correctly and it will show up on clicking the login link. till now everything is fine. but on the next click on the login hyperlink the form is not hiding or sliding up. can anyone help me to find the mistake in here.??

Answer 1

replace the script with this

$(document).ready(function() { 
    $("#nd_login_form").slideDown(); 
    $(".active").on('click',function () { 
        $("#nd_login_form").slideToggle("fast"); 
    }); 
}); 

you have two docuent.ready functions in your script. and at first you want to show the form use the slideDown() class. Working Fiddle

Answer 2

Just add display:none to the form style

 <form action="<?php echo home_url(); ?>/?wcz" method="post" 
    class="nd_form" 
    id="nd_login_form" 
    style="z-index:100;background:gainsboro;position:absolute;display:none">

and jQuery:

$(document).ready(function() { 

    $(".active").on('click',function () { 
        $("#nd_login_form").slideToggle("fast"); 
    }); 
}); 

WORKING DEMO