CODEWITHSUNDEEP
jqueryhtml
Wp3Dev
Wp3Dev

Reputation: 2079

Show/Hide div element with one button

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.

Upvotes: 7

Views: 76289

Answers (10)

Shreekanth
Shreekanth

Reputation: 859

I'm using VueJs, and it's working hide/show in a single button. When I click on the button it will toggle.
For Example:-
If show is false then it will assign true.
If show is true then it will assign false.

<template>
    <div>
        <h1 v-if="show">Show</h1>
        <h1 v-else>Hide</h1>
        <button @click="show =! show">Toggle Heading</button>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            show: true 
        }
    }
}
</script>

Upvotes: 0

Anish Vyas
Anish Vyas

Reputation: 15

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.

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

There's no need to use inline javascript.

LIVE DEMO

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

Upvotes: 5

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55740

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

Upvotes: 12

Blazemonger
Blazemonger

Reputation: 92893

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.

Upvotes: 0

Fernando Javier Santamarina Ca
Fernando Javier Santamarina Ca

Reputation: 111

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/

Upvotes: 0

SpYk3HH
SpYk3HH

Reputation: 22570

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

Upvotes: 0

Matheus Azevedo
Matheus Azevedo

Reputation: 898

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.

Upvotes: 0

Robert
Robert

Reputation: 77

Try jQuery's toggle function to accomplish this

Upvotes: 0

Related Questions