jQuery attribute check

Question

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.

use $('#quotes').toggle()

vittore
– vittore

2013-03-04 07:06:47 +00:00
Commented Mar 4, 2013 at 7:06 — vittore
– vittore, Commented Mar 4, 2013 at 7:06

Frédéric Hamidi · Accepted Answer · 2013-03-04 07:06:45Z

4

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

answered Mar 4, 2013 at 7:06

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheWalkingPacifist Over a year ago

What does the ! do in if(!$("#quotes")

Frédéric Hamidi Over a year ago

@TheWalkingPacifist, it negates the return value of is(). Therefore, the conditional expression will be true if the element is hidden and false if it is visible. You could also use the :hidden selector and remove the !, as Sudip Pal does in his answer.

TheWalkingPacifist Over a year ago

Thank you. Your answer and explanation is much appreciated and worked perfectly.

Sudip · Accepted Answer · 2013-03-04 07:08:13Z

1

You should change the if checking like this,

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

answered Mar 4, 2013 at 7:08

Sudip

2,0512 gold badges13 silver badges16 bronze badges

Comments

vittore · Accepted Answer · 2013-03-04 07:08:30Z

0

Consider the following code

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

answered Mar 4, 2013 at 7:08

vittore

17.6k6 gold badges46 silver badges84 bronze badges

2 Comments

vittore Over a year ago

Why downvote? What is the reason of making condition if there is function in jquery doing exactly this.

Frédéric Hamidi Over a year ago

I did not downvote, but two calls to slideToggle() are not the same as one call to show()/hide() followed by one call to fadeIn()/fadeOut() with a slow duration. This code also assumes the two elements are in the appropriate initial conditions (#summary visible and #quotes hidden).

Collectives™ on Stack Overflow

jQuery attribute check

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related