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.??

first remove the self exe function, you dont need that when you document ready... so is trying to call the function before the document is ready,... http://stackoverflow.com/questions/6027337/document-ready-called-inside-an-external-function — Jorge Y. C. Rodriguez, Apr 02 '14 at 04:54
i have same issue...in fiddle its working but on deploying it in the site it is not...on the second click it is not hiding..plzz help .. — Zammuuz, Apr 02 '14 at 05:01
then it has to be something else causing the error, share the link or add more code, since this is **not** the part with the problem — Jorge Y. C. Rodriguez, Apr 02 '14 at 05:04
if you want to hide the form initially you can use `.hide()` instead of `.slideup()` in document ready. Then just write a `.slideToggle()` in `.click()`. like this fiddle http://jsfiddle.net/cjramki/Q7aah/ — CJ Ramki, Apr 02 '14 at 05:08
@CJRamki: i tired by changing slideup to hide. no change occurs. — Zammuuz, Apr 02 '14 at 05:26
@CJRamki well if you put it like that, is faster to do it in css, since it will load with the DOM http://jsfiddle.net/Q7aah/3/ — Jorge Y. C. Rodriguez, Apr 02 '14 at 05:26
yeah... @jycr753 I agree with you... This post owner not interacting with us... — CJ Ramki, Apr 02 '14 at 05:28
@jycr753: there is no error is showing in the console that is the main failure. thts y i can't figure out what i the actual problem. my code is exactly like in the post with some changes in the id names.but i updated similar to this. i will give link to my site. in the home page top along with twitter icons there is the login link. http://rotarymetropolis.com/ — Zammuuz, Apr 02 '14 at 05:51
is just a css problem, too many position absolutes, i will look at it well later on,... but is not jquery or javascript problem, is just a bad placement of css or html — Jorge Y. C. Rodriguez, Apr 02 '14 at 06:08
@jycr753:: okay.. waiting for your rply..u r the only hope i hve sir.. :( — Zammuuz, Apr 02 '14 at 06:44

score 1 · Accepted Answer · answered Apr 22 '14 at 05:36

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

answered Apr 22 '14 at 05:36

chandu

2,276
3
20
35

please adjust the form code correctly. I have just changed the JQuery code – chandu Apr 22 '14 at 05:55

score 0 · Answer 2 · answered Apr 22 '14 at 05:56

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

jquery slidetoggle is not hiding

2 Answers2