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

Answer 2

There's no need to use inline javascript.

LIVE DEMO

$('#buttonLogin').click(function(){
   $('#login_Box_Div').toggle();
});

Answer 3

You may try this

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    var color=$("#login_Box_Div").is(':hidden') ? '#FF0' : 'white';
    $("#buttonLogin").css('color', color);
});

Example.

Update:

Or using togglrClass you may try this

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    $("#buttonLogin").toggleClass('whiteColor yelolowCollor');
});

Example.

Answer 4

Try jQuery's toggle function to accomplish this

Answer 5

JS

function displayLoginBox(elem){

 $("#login_Box_Div").toggle();
 $(elem).toggleClass('login_clicked');

}

CSS

#buttonLogin{color: #fff;}
.login_clicked{color: #FF0 !important;}

HTML

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

This approach also changes the login button color.

Answer 6

Try this:

function displayLoginBox(){
    $("#login_Box_Div").toggle(function(e) {
        if ($(this).is(":visible")) {
            $("#login_Box_Div").show();
            $("#buttonLogin").css('color', '#FF0');
        }
        else {
            $("#login_Box_Div").hide(); 
            $("#buttonLogin").css('color','white');
        };
    });
}

Answer 7

Use $('login_Box_Div').is(':hidden') and $('login_Box_Div').is(':visible')

You also shouldn't use inline javascript. Here is a jsfiddle of it working http://jsfiddle.net/MrsW8/

Answer 8

The :hidden and :visible selectors are filters, not Boolean methods.

What that means is: when you're testing

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

...what you get from $("#login_Box_Div:hidden") is a jQuery object -- which ALWAYS exists, and will ALWAYS return true, even if there's nothing in it.

What you need to do is test the .length of that jQuery object. If it's zero, the jQuery object is empty:

if ($("#login_Box_Div:hidden").length){ // zero is false, greater than zero is true

http://jsfiddle.net/mblase75/ThwFs/

Alternatively, use the .is(selector) method, which DOES return a Boolean (true/false) value:

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

http://jsfiddle.net/mblase75/ThwFs/2/

While there are many ways to streamline your code, this is the answer to the actual problem you were having.

Answer 9

You can use this code if you like, it helped me achieve the same.

$("button").click(function(){
$("div").toggle(function(e) {
        if ($(this).is(":visible")) {
            $("div").show();
            $("button").css('color', 'red');
        }
        else {
            $("div").hide(); 
            $("button").css('color','white');
        };
    });
});

I am just using a single div and a single button with no id. Hope it helps your cause.