Jquery else if statement

Question

I came up with some jquery to come from an external page and to show the hidden div (#section2) on another page. The problem is that I can't seem to get #section3 to work the same as #section2. Here's the code.

jQuery(document).ready(function() {
    var hash = window.location.hash.substring(0);
    jQuery(hash).css({
        "display": "block"
    });
    if (hash != '#section2') {
        jQuery('#section1').css({
            "display": "block"
        });
    }
    else {
        jQuery('#section1').css({
            "display": "none"
        });
    }
});

I tried else if if(hash != '#section3'){ jQuery('#section1').css({"display":"block"}); } I can only seem to get either #section2 or #section3 to appear with section1 hidden when their respective urls with the hash are entered. I can't seem to get them both of them to function correctly at the same time. Basically I need some thing that will produce if(hash != '#section2' or '#section3'). I'm learning so any help would be much appreciated.

Why `var hash = window.location.hash.substring(0);` instead of `var hash = window.location.hash;`? — jfriend00, Aug 23 '12 at 05:45

nbrooks · Accepted Answer · 2012-08-23T05:48:03.837

0

jQuery(document).ready(function() {
    var hash = window.location.hash.substring(0);
    jQuery(hash).css({
        "display": "block"
    });
    if (hash != '#section2' && hash != '#section3') {
        jQuery('#section1').css({
            "display": "block"
        });
    }
    else {
        jQuery('#section1').css({
            "display": "none"
        });
    }
});

Also, look into using the jQuery .show() and .hide() instead of those css changes (same effect, but less wordy, and it remembers the previous state).

edited Aug 23 '12 at 05:48

answered Aug 23 '12 at 05:42

nbrooks

18,126
5
54
66

Thanks that worked perfect. I tried || would you mind explainng to me why && works and not ||. I'd appreciate it. Thanks again. – John Phelan Aug 23 '12 at 05:52
@john The idea is that you want you to show `#section1` only if hash is not equal to `#section2` AND not equal to `#section3`. Writing it in english it might seem like an or condition, but you definitely don't want it to be equal to either one. An OR conditional will pass if either of the conditions is true, but in this case you only want it to pass if BOTH are true (i.e. if neither is equal to hash). I can explain this in more detail if this isn't clear enough, let me know. – nbrooks Aug 23 '12 at 05:56
your explanation was very clear to me. I appreciate it. The `.hide()`, and `.show()` also worked. The only problem that I have is that when Sections 2 & 3 open they open in the center of the page and the header is out of view. I assume this is due to the anchors. Would I used `.offset()` to address this? – John Phelan Aug 23 '12 at 15:18
@john you could possibly use that, but a css fix would be better. Try using `.show()` instead of `.css(...)`. If that doesn't help ask a new question and include your current html and css, and I can take a look. – nbrooks Aug 23 '12 at 17:26
really appreciate your help. I was able to resolve the jump issue with help from another question. [link](http://stackoverflow.com/questions/3659072/jquery-disable-anchor-jump-when-loading-a-page) – John Phelan Aug 23 '12 at 18:14
@john oh lol that's what you meant by 'center of the page', sorry I thought you meant it was displaying incorrectly. Glad you were able to resolve it. – nbrooks Aug 23 '12 at 18:33

score 0 · Answer 2 · answered Aug 23 '12 at 05:44

Try;

$(document).ready(function(){
  var sectionhash = window.location.hash.substring(0);
  $(hash).css({"display":"block"});
  if(hash != '#section2' || hash != '#section3'){
    $('#section1').css({"display":"block"});
  }else {
    $('#section1').css({"display":"none"});
  }
});

OR

$(document).ready(function(){
  var sectionhash = window.location.hash.substring(0);
  $(hash).css({"display":"block"});
  if(hash != '#section2'){
    $('#section1').css({"display":"block"});
  }else if(hash != '#section3'){
    $('#section1').css({"display":"block"});
  }else {
    $('#section1').css({"display":"none"});
  }
});

adeneo · Answer 3 · 2012-08-23T05:59:27.437

0

(function($) {
    var hash = window.location.hash;
    $(hash).css('display', 'block');
    $("#section1").toggle(!(hash=='#section2'||hash=='#section3'));
})(jQuery);

edited Aug 23 '12 at 05:59

answered Aug 23 '12 at 05:50

adeneo

312,895
29
395
388

Jquery else if statement

3 Answers3