Why here we need to click two times (/):

html:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

css: #foo {display: none;}

js:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'none')
      e.style.display = 'block';
   else
      e.style.display = 'none';
}

When here only by one click text disappears (/):

html:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" style='display:none'>This is foo</div> <!-- add display style here -->

css: <!-- delete ccs here -->

js:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'none')
      e.style.display = 'block';
   else
      e.style.display = 'none';
}

Why here we need to click two times (http://jsfiddle/xL8hyoye/4/):

html:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

css: #foo {display: none;}

js:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'none')
      e.style.display = 'block';
   else
      e.style.display = 'none';
}

When here only by one click text disappears (http://jsfiddle/xL8hyoye/5/):

html:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" style='display:none'>This is foo</div> <!-- add display style here -->

css: <!-- delete ccs here -->

js:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'none')
      e.style.display = 'block';
   else
      e.style.display = 'none';
}

• javascript
• html
• css

• 1 Note that a DIV by default has a display effectively of "block" style but it returns "" as the style is a part of the element definition and not an attribute (yet). – Mark Schultheiss Commented Jul 12, 2015 at 21:38

4 Answers 4

Check if the style.display property is empty

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block' || e.style.display == '')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

Because .style is looking at the direct inline style of the element other than it's CSS style sheet. So for example, it will work if it looked like so:

<div id="foo" style="display: none;">This is foo</div>

Here is an example. Otherwise the .style isn't defined when placed in the CSS. In the second example the first click defines e.style.display, then it works normally afterwards. That is why it takes two clicks.

Another way to fix it is add an else since e.style.display to change it to what you want, assuming the element is hidden at the start:

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

In the getElementById() documentation they state :

Document.getElementById()

Returns a reference to the element by its ID.

See it here : https://developer.mozilla/en-US/docs/Web/API/Document/getElementById

So your javascript code is only assessing HTML Without CSS on the first iteration in particular. I guess that's why first it goes to else and on the second click it gives e.style.display the value block ; because e.style.display has none as a value then.

Try using a different method than getElementById() if ever.

Hope it helps !

This can be solved changing the order in your if-else statement, like:

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

DEMO

Note: Your initial code don't work because the initial value of e.style.display is "" instead none :)