jquery - Show/Hide div element with one button

Question

I have recently been diving into jquery and loved how you could show/hide elements when an event is triggered. I tried adding a simple feature to my test website that will show Login Form when the login button is clicked and then hide the form if the button is clicked again, however; the jquery function I am using only works once (when I click the button and display the form) but after the form is displayed if I try to click the button again nothing happens.

Jquery Code:

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 button code:

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

HTML div code:

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

I have a feeling that the jquery script only runs once and then is finished, but I could be wrong.

Answer 1

Try using .toggle()

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    $(this).toggleClass('class1')
});?

.class1
{
     color: orange;
}?

You can use toggleClass() to toggle the class for the button

Check FIDDLE