TheWalkingPacifist
TheWalkingPacifist

Reputation: 43

jQuery attribute check

I want to make in if...else statement in jQuery but I am not sure how to set it up for what I want.
Here is what I have:

$(document).ready(function(){
  $("#quotes").hide();
  $("button").click(function(){
    if($("#quotes").hide()==true){
      $("#summary").hide();
      $("#quotes").fadeIn("slow");
    } else {
      $("#quotes").hide();
      $("#summary").fadeIn("slow");
    }
  });
});

I want it so that if #quotes is hidden, then on button click, hide #summary and fadeIn #quotes. Otherwise, (if #quotes is showing) hide #quotes and fadeIn #summary.

Upvotes: 1

Views: 127

Answers (3)

vittore
vittore

Reputation: 17579

Consider the following code

 $("#quotes").hide();
 $("button").click(function(){
    $("#summary").slideToggle();
    $("#quotes").slideToggle();
 });

Upvotes: 0

Sudip
Sudip

Reputation: 2051

You should change the if checking like this,

 if($("#quotes").is(':hidden')==true){

Upvotes: 1

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262939

You can pass the :visible selector to the is() method:

$("button").click(function() {
    if(!$("#quotes").is(":visible")) {
        $("#summary").hide();
        $("#quotes").fadeIn("slow");
    } else {
        $("#quotes").hide();
        $("#summary").fadeIn("slow");
    }
});

Upvotes: 4

Related Questions