Ostatnio nurkowałem w jquery i uwielbiałem, jak można wyświetlać / ukrywać elementy po uruchomieniu zdarzenia. Próbowałem dodać prostą funkcję do mojej strony testowej, która pokaże formularz logowania po kliknięciu przycisku logowania, a następnie ukryć formularz, jeśli przycisk zostanie ponownie kliknięty; Funkcja jquery, z której korzystam, działa tylko raz (gdy klikam przycisk i wyświetla formularz), ale po wyświetleniu formularza, jeśli spróbuję ponownie kliknąć przycisk, nic się nie dzieje.

Kod 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');
}
}

Kod przycisku HTML:

<h3> <a href= "#">Pictio  </a> <button id = "buttonLogin" onclick = "displayLoginBox()">LogIn</button></h3>

Kod div HTML:

<div id = "login_Box_Div"> 
        <form name = "myform" > 
            <input type = "text" name = "username" placeholder = "Username"  />
            <input type = "password" name = "password" placeholder= "Password" />
            <input type = "submit" id = "submitLogin" />
        </form>

</div>

Mam wrażenie, że skrypt jquery działa tylko raz, a potem jest zakończony, ale mogę się mylić.