A basic if/else on javascript not working

Question

I'm trying to make a drop down menu - upon the first hit on div it should extend,upon second hit it should come back where it was.I'm very new to javascript so I'm not really sure where I went wrong it looks perfect to me,the code:

$(document).ready(function() {
     $("#firstList").hide();
     $("#firstExtend").click(function() 
     {
         if(("#firstList").hide == true)
         {
            $("#firstList").show("blind",250);
         }
         else
         {
             $("#firstList").hide("fade",250);
         }
     });
});

HTML:

<div id="firstExtend" class="list">Praplesti</div>
                    <ul id="firstList">
                        <li class="list"><a href="#">Nium</a></li>
                        <li class="list"><a href="#">cia</a></li>
                        <li class="list"><a href="#">kazkas</a></li>
                        <li class="list"><a href="#">tur</a></li>
                        <li class="list"><a href="#">but cj</a></li>
                        <li class="list"><a href="#">tikiuosiveiks</a></li>
                    </ul>
                </div>

`("#firstList").hide` returns `undefined` because strings don't have a `hide` property. And `undefined == true` is `false`. Even if you had written `$("#firstList").hide`, [a search in the jQuery documentation](https://api.jquery.com/?s=hide) reveals that jQuery objects don't have a hide property with a boolean value. — Felix Kling, Mar 19 '14 at 18:27
possible duplicate of [Testing if something is hidden, using jQuery](http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-using-jquery) — Felix Kling, Mar 19 '14 at 18:28
Seems easier to ditch the blind effect and do `fadeToggle(250)` — adeneo, Mar 19 '14 at 18:29

score 4 · Accepted Answer · answered Mar 19 '14 at 18:27

4

the if (object.hide) clause is a bit off. You can use .is(":property") to check. So in your case, do:

if ( $("#firstList").is(":visible") )

answered Mar 19 '14 at 18:27

tymeJV

99,730
13
150
152

I've did exacly as you wrote and when I press on the div which should expand nothing happens, I'm pretty new to this. – dnc123 Mar 19 '14 at 18:35
Ahh, put an `!` mark before this. Your `if` statement expects the check to for is it hidden – tymeJV Mar 19 '14 at 18:36
Thanks, though can you tell me exact place where ! should be put?Instead of using ! I swapped the show/hide code part inside of if/else, though I understood what you had in mind,Tanks again,tyme :)! – dnc123 Mar 19 '14 at 18:41
@dnc123: `$("#firstList").is(":visible")` returns `true` if the element is visible. `!` is the not operator, which negates the boolean value. So `!$("#firstList").is(":visible")` returns `false` if the element is visible. This is a basic JavaScript operator and I recommend to read a JavaScript tutorial to learn these basics: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide. – Felix Kling Mar 19 '14 at 18:46

score 0 · Answer 2 · edited Mar 19 '14 at 18:33

0

try this:

$(document).ready(function () {
    $("#firstList").hide();
    $("#firstExtend").click(function () {
        if (("#firstList").is(':hidden')) {
            $("#firstList").show("blind", 250);
        } else {
            $("#firstList").hide("fade", 250);
        }
    });
});

edited Mar 19 '14 at 18:33

A. Wolff

72,298
9
84
139

answered Mar 19 '14 at 18:29

Dheeraj Yadav

130
1
8

Why should the OP try this? Posting code without an explanation is almost always useless. Especially when it is not formatted. – Felix Kling Mar 19 '14 at 18:30

A basic if/else on javascript not working

2 Answers2