Show/Hide div element with one button

html, jquery

Solution

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

Problem

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.

Original source