jquery. something wrong with syntax?

Question

$('#buttons1').on('click', function(event) {             

    $('#button1content').toggle('show');
    var wasVisible = $("#button1content").is(":visible");
    if(!wasVisible) {
        $("#buttons1").css("opacity", "0.5");
    }
});

Toggle works perfectly fine, but whatever is inside the if statement doesn't get executed when #button1content is no longer visible. boo. It could be another part of my code that is messing it up, but I only want to know if there is anything wrong with this.

Answer 1

your variable wasVisible will always return a true

• you can place the toggle on the last part.

you can reorder your code like this.

$('#buttons1').on('click', function(event) {             

    var wasVisible = $("#button1content").is(":visible");
    if(!wasVisible) {
        $("#buttons1").css("opacity", "0.5");
    }
    $('#button1content').toggle('show'); 
});

JSFIDDLE DEMO

---

OR

---

• just simply remove the 'show' on the toggle just use

  $('#button1content').toggle();

like this:

$('#buttons1').on('click', function(event) {             

    $('#button1content').toggle();
    var wasVisible = $("#button1content").is(":visible");
    if(!wasVisible) {
        $("#buttons1").css("opacity", "0.5");
    }
});

JSFIDDLE DEMO