jQuery if/else Statement

Question

I have a panel with 3 buttons. Currently I have it so that if you click one of the 3 buttons, it toggles a hidden DIV ("#utilityBK") show and then to animate from the bottom and slide up. I need to add some logic to the function to determine if "#utilityBK" is already showing, and if it is, just to swap out different DIVs that's contained within. Here is the HTML

<div id="utilityBK">
<div id="chatContent"></div>
<div id="locationsContent"></div>
<div id="searchContent"></div>
</div>

Here's one of the functions that currently works just to toggle the utilityBK and that's it.

$(document).ready(function(){
    ("#chat").click(function(){
       if ($("#utilityBK").is(":hidden")) {
          $("#utilityBK").animate({'bottom': '60px'}, 'slow');
          $('body').addClass('noscroll');
       } 
    else {
       $("#utilityBK").animate({'bottom': '-325px'}, 'slow');
       $('body').removeClass('noscroll');
         } 
    }); 
});

And then this is my attempt on adding the additional logic to check to see if #utilityBK, #searchContent or #chatContent is displayed. If so, I just want it to hide those *Content IDs and display the #locationsContent DIV, otherwise animate the #utilityBK back down.

$(document).ready(function(){
$("#locations").click(function(){
  if ($("#utilityBK").is(":hidden")) {
   $("#utilityBK").animate({'bottom': '60px'}, 'slow');
   $('body').addClass('noscroll');
} 
else  if ($("#searchContent, #chatContent, #utilityNav").not(":hidden")) {
    $("#searchContent").css("display","none");
    $("#chatContent").css("display","none");
    $("#locationsContent").css("display","block");  
} else {
    $("#utilityBK").animate({'bottom': '-325px'}, 'slow');
    $('body').removeClass('noscroll');
} 
}); 
});

So at the moment that particular button doesn't do anything... I'm guessing I'm not structuring the else if statement they way I intend it to work.

Barmar · Accepted Answer · 2014-02-03 10:53:02Z

1

.not() doesn't return true/false like .is(). It returns a jQuery collection. If you want to test whether there are any elements in the collection, use .length:

if ($("#searchContent, #chatContent, #utilityNav").not(":hidden").length > 0)

answered Feb 3, 2014 at 10:53

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

Comments

dhana · Accepted Answer · 2014-02-03 11:42:50Z

0

Try this

// Matches #utilityBK element that are hidden
$('#utilityBK:hidden').length > 0

Instead of $("#utilityBK").is(":hidden")

Update:

Demo link http://jsfiddle.net/dhana36/YT3CD/1/

I have imagined you are trying to hide the div like this,

$(document).ready(function(){
    $("#chat").on('click', function(){
       $("#utilityBK").toggle('slow');
        });
});

edited Feb 3, 2014 at 11:42

answered Feb 3, 2014 at 10:53

dhana

6,5255 gold badges43 silver badges66 bronze badges

2 Comments

Salman Arshad Over a year ago

Result will be same either way.

Salman Arshad Over a year ago

No, still does not answer the question.

Collectives™ on Stack Overflow

jQuery if/else Statement

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related