Why if / elseif statement not working jquery

Question

Sorry if this is a repeat but couldnt find anything the same ish...

I can't get the if else statement to work. I get the first part done but the second won't. The aim is to click on a div and it expands, then when clicked again it shrinks.

$(document).ready(function(){
    if($(".back2").css("height") < "51px")
    {
        $(".back2").click(function()
        {
            $(".back2_img,.back2").css({"height":"200px"}, 'slow'); 
        });
    }
    ElseIf($(".back2").css("height") >"55px")
    {
        $(".back2").click(function()
        {
            $(".back2,.back2_img").css({"height":"50px"}, 'slow');
        });
    };
});

score 4 · Answer 1 · answered Sep 08 '12 at 07:19

4

The correct syntax is else if:

if (condition) {
    //code
}
else if (condition) {
    //code
}

answered Sep 08 '12 at 07:19

Daedalus

7,586
5
36
61

Alexander Wigmore · Accepted Answer · 2012-09-08T10:24:27.483

3

I've tidied up your code, also it is else if not ElseIf.
You also had a slight syntax problem with one of your ;. (Not necessarily a code breaking error, but just a good habit to keep things 100% consistent, see comments for more info).

Proper nesting of code will save you hours of headache!

$(document).ready(function() {
    if ($(".back2").css("height") < "51px") {
        $(".back2").click(function() {
            $(".back2_img,.back2").css({
                "height": "200px"
            }, 'slow');
        });
    }
    else if($(".back2").css("height") > "55px") {
        $(".back2").click(function() {
            $(".back2,.back2_img").css({
                "height": "50px"
            }, 'slow');
        });
    }
});

edited Sep 08 '12 at 10:24

answered Sep 08 '12 at 07:21

Alexander Wigmore

3,157
4
38
60

Also the comparison using the greater than and less than against a string won't work as expected. ie. "140px" > "55px" = false – Rusty Jeans Sep 08 '12 at 07:23
`;`s are not required, nor is it a syntax error to place it where the user had. [Reference](http://stackoverflow.com/questions/1834642/best-practice-for-semicolon-after-every-function-in-javascript). – Daedalus Sep 08 '12 at 07:25
";s are not required" - my point exactly, why have something that is un-needed? - Keep semi-colons for specifically denoting code end points, to save yourself confusion. Plus JS validators will throw up an error anyway, so may as well fix them. – Alexander Wigmore Sep 08 '12 at 07:29
@AlexanderWigmore Touche. I wish I could expand, but there isn't that much else to say. You make a fine point. – Daedalus Sep 08 '12 at 07:32

score 2 · Answer 3 · answered Sep 08 '12 at 07:22

It's "else if" not "ElseIf", javascript is a case-sensitive language. And please write in nested-style! for God sake... Please, it's good for you AND everyone else. Like this:

$(document)
.ready(
    function(){
        if ($(".back2").css("height") < "51px")
        {
            $(".back2")
            .click(
                function()
                {
                    $(".back2_img,.back2")
                    .css(
                        {"height":"200px"}, 
                        'slow'
                    );
                }
            );
        }
        else if ($(".back2").css("height") >"55px") {
            $(".back2")
            .click(
                function()
                {
                    $(".back2,.back2_img")
                    .css(
                        {"height":"50px"}, 
                        'slow'
                    );
                }
            );
         };
    }
);

Why if / elseif statement not working jquery

3 Answers3