Недавно я погрузился в jquery, и мне понравилось, как можно показывать / скрывать элементы при запуске события. Я попытался добавить на свой тестовый веб-сайт простую функцию, которая будет отображать форму входа при нажатии кнопки входа, а затем скрывать форму при повторном нажатии кнопки; Используемая мной функция jquery работает только один раз (когда я нажимаю кнопку и отображаю форму), но после отображения формы, если я пытаюсь нажать кнопку еще раз, ничего не происходит.

Код Jquery:

function displayLoginBox(){


if ($("#login_Box_Div:hidden")){

        $("#login_Box_Div").show();
        $("#buttonLogin").css('color', '#FF0');

}
else if($("#login_Box_Div:visible")){

        $("#login_Box_Div").hide(); 
        $("#buttonLogin").css('color','white');
}
}

Код кнопки HTML:

 <a href="#">Pictio  </a> LogIn

HTML-код div:

У меня такое ощущение, что скрипт jquery запускается только один раз, а затем заканчивается, но я могу ошибаться.