I have jQuery code that opens and closes a block when I click on a header. The problem is that if you click on it many times, then the block continues to open and close until it does this as many times as you clicked, how to fix it? Here is the jQuery code:

$(document).ready(function(){ var flag = 0; $("#top_name").click(function(){ if(flag == 0){ $("#auth_form").slideDown(300); $("#auth_block").css({"border-bottom":"2px solid #ffffff"}); flag = 1; } else { $("#auth_form").slideUp(300); $("#auth_block").css({"border-bottom":"none"}); flag = 0; } }); });

and the block itself:

 <div class="info_block" id="auth_block"> <div id="top_name">Авторизация</div> <div id="auth_form"> <div id="text_info">Логин</div> <input type="text" name="auth_login"> <div id="text_info">Пароль</div> <input type="password" name="auth_pass"><br> <input type="submit" name="auth_sub" value="Войти"> <a href="javascript://" id="goto_reg">Регистрация</a> </div> </div>

Thank you in advance!

  • one
    There is no conflict here, examine the queue system. To get rid of this effect, it is enough to call .stop() at the beginning of the handler. - etki
  • The problem is that it causes discomfort! Fike, thanks! Your function helped!) Soledar10, I didn’t notice it until my friends noticed it!) - PicanTo

1 answer 1

Reply from comment

To get rid of this effect, it is enough to call .stop () at the beginning of the handler:

 $("#auth_form").stop().slideDown(300); // ... $("#auth_form").stop().slideUp(300);