Show/Hide element by ID

Question

function showhide(id) {
  obj = document.getElementById(id);

  if (obj.style.display == 'none' || obj.style.display == null)
    obj.style.display = 'block';
  else
    obj.style.display = 'none';
}

#stuff {
  display: none;
}

<a href="#" onclick="showhide('stuff'); return false;">Click Me</a>

<div id="stuff">
  secret stuff
</div>

This kinda works but require two clicks. It seems that it can’t detect that the state is null.

Apparently if I change the condition to this it works:

if (obj.style.display == 'block')
        obj.style.display  = 'none';
else
        obj.style.display  = 'block';

My question now is, what is wrong with the first condition?

Edit your post with `console.log(obj.style.display)` result, please — Luiz Gonçalves, May 08 '17 at 18:20
https://jsfiddle.net/72Lx1s8a/ works with your first example. — Jordan Soltman, May 08 '17 at 18:22
Possible duplicate of [Show/hide 'div' using JavaScript](http://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) — Heretic Monkey, May 08 '17 at 18:25
Your first example should work if you remove the null check. If it's "none" - that is the only time it will be hidden. If it's "anything else" it will be displayed. — James, May 08 '17 at 18:27
Add this comparison to your if `obj.style.display == ''`and it will work — Lixus, May 08 '17 at 18:28
@James It won’t work if the `null` check is removed, because `obj.style.display` still isn’t `"none"` at the very beginning. — Sebastian Simon, May 08 '17 at 18:33
Oh right because he's using a css rule to hide it rather than setting the display attribute on the element, gotcha — James, May 08 '17 at 18:39

Piyush · Answer 1 · 2017-05-08T21:38:30.820

If the element's display is being specified by a CSS rule, you'll need to get it's computed style. What you're doing would work if you were replacing an inline style on the div.

function showhide (id)
{
    obj = document.getElementById(id);
    var displayStyle = obj.currentStyle ? obj.currentStyle.display :
                          getComputedStyle(obj, null).display;
    if (displayStyle == 'none' || displayStyle == null)
        obj.style.display  = 'block';
    else
        obj.style.display  = 'none';
}

#stuff { display:none; }

<a href="#" onclick="showhide('stuff'); return false;">Click Me</a>

<div id="stuff">
    secret stuff
</div>

score 0 · Answer 2 · answered May 08 '17 at 18:32

Ask yourself: at what point is obj.style.display ever null? If you actually log it to the console, you’ll get "".

In your first code obj.style.display is neither "none" nor "", so the else case is executed: it’ll be set to "none". It already isn’t displayed, but only because of a CSS rule, not a direct style property on the element itself.

Your second code works because it implies that "" and "none" behave the same way and "block" behaves differently, which is actually the case (if you only use "none" and "block").

score 0 · Answer 3 · answered May 08 '17 at 18:43

You could set the display attribute of the element directly rather than using CSS, so:

<div id="stuff" style="display:none">
  secret stuff
</div>

and get rid of

#stuff { display:none; }

Then your first example (the null check is not needed) would work.

Show/Hide element by ID

3 Answers3