CODEWITHSUNDEEP
javascriptjquery
Duarte Arribas
Duarte Arribas

Reputation: 317

How to show and hide something in jQuery using if's

Hello everyone so I want to show and hide a button using jQuery, but only if a variable is true for example.

Ex: 

var st1wch1 = false;

 $(document).ready(function(){
    $("#choice1").click(function(){
        var st1wch1 = true
        state1_1warrior()
    });
});

$(document).ready(function(){
    if(st1wch1 == false){
        $("button#choice1").show()
    }
    else if(st1wch1 == true){
         $("button#choice1").hide()   
    }
 })

But for some reason it never hides, any ideas??? Thanks in Advance.

Upvotes: 0

Views: 189

Answers (8)

Amit Chauhan
Amit Chauhan

Reputation: 6869

You can use toggleClass.

$('#button').toggleClass('hidden', condition);

Created css class with display: none;

Upvotes: 0

user1392902
user1392902

Reputation:

document.ready() is only called when the page initially loads, so it evaluates the if/else statement when you load the page and then never again. Clicking the element doesn't rerun the if else statement.

To get the behavior you want you can either do 

$("#choice1").click(function(){
    $(this).toggle();
});

or 

$("#choice1").click(function(){
   evaluateBoolean();
});

function evaluateBoolean(){
    if(st1wch1 == false){
        $("button#choice1").show()
    }
    else if(st1wch1 == true){
          $("button#choice1").hide()   
    }
}

Upvotes: 0

user7110739
user7110739

Reputation:

You can use toggle:

var st1wch1 = true;
$('#choice1').toggle(condition);

Side note: Don't use things like

if (st1wch1 === true)

Do:

if (st1wch1)

and (for the == false / === false case):

if (!st1wch1)

Upvotes: 0

Alexandru Buturuga
Alexandru Buturuga

Reputation: 56

You must place your code inside the click handler. I think you want to add at least 2 buttons later, and you want to toggle just a part of them or something like this.

var st1wch1 = false;


 $(document).ready(function(){
    $("#choice1").click(function(){
       if(st1wch1 == false){
         st1wch1 = true;
        $("button#choice1").show()
      }
      else if(st1wch1 == true){
       st1wch1 = false;
       $("button#choice1").hide()   
     } 
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="choice1">choice1</button>

Upvotes: 0

Madhan Kumar
Madhan Kumar

Reputation: 121

After changing the variable, you code does not go through the if else conditions. Put that show and hide condition inside a function like below

function toggleButton(){
    if(st1wch1 == false){
        $("button#choice1").show()
    }
    else if(st1wch1 == true){
        $("button#choice1").hide()   
    }
}

and then call this function everytime you change the variable's value.

Upvotes: 0

pawooten
pawooten

Reputation: 160

The logic you've implemented to show or hide the element is defined within the document ready event, which is raised before the user has a chance to click on the button and raise the event handler which toggles your global variable.

Upvotes: 1

lilezek
lilezek

Reputation: 7344

The most simple way to do it may be this:

$(document).ready(function(){
    $("#choice1").click(function(){
       $("button#choice1").toggle()
    });
});

Upvotes: 1

adeneo
adeneo

Reputation: 318182

You probably wanted to hide and show when the element is clicked?

$("#choice1").click(function(){
    $(this).toggle();
});

Upvotes: 0

Related Questions