Click twice for js to function

Question

For this to function I need to click twice on my toggle link. And cannot really see why nor get solution to make it work on the first click. Can somepone explain why like this and what to do? The idea is to show hide a navigation bar (fixed) here is JS

    <script>
      function toggle_visibility(id) {
            var e = document.getElementById(id);
       e.style.display = ((e.style.display!='none') ? 'none' : 'block');
      }
   </script>

And the Html

<div class="nav">
  <a onclick="toggle_visibility('navbar');" style="cursor:pointer;">V</a>
  <div id="navbar" class="hidden">navigation items</div>
 </div>

And some CSS

.hidden {display:none;}

Reason of the .hidden class is to have it hidden in the beggining. i didnt get done othe way. It should be possible though i think. :) thanks in advance

`e.style.display` doesn't get styles that come from CSS, it only gets inline styles. — Barmar, Mar 10 '15 at 19:58

score 4 · Answer 1 · answered Mar 10 '15 at 20:13

Ok this is why you have to click twice:

When you click for the first time, the default inline CSS will be applied display:none because it is not none it is undefined. Next time you click the test is false, becaue it is none and thus the inline CSS will be applied display:block. The next piece of code will check if there is any style applied first, it will continue your scrip normally if it returns true, else it will apply the display:block (this way it will prevent your first time run to apply display:none).

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

Dhiraj · Answer 2 · 2015-03-10T20:06:08.707

0

Update

How about using classList and then toggle since you are using classes

function toggle_visibility(id) {
  var e = document.getElementById(id);
  e.classList.toggle('hidden');
}

function toggle_visibility(id) {
  var e = document.getElementById(id);
  e.classList.toggle('hidden');
}

.hidden {display:none;}

<div class="nav">
  <a onclick="toggle_visibility('navbar');" style="cursor:pointer;">V</a>
  <div id="navbar" class="hidden">navigation items</div>
 </div>

~~You should send the string `"navbar"` in `toggle_visibility` method like this `toggle_visibility('navbar');`~~

edited Mar 10 '15 at 20:06

answered Mar 10 '15 at 19:57

Dhiraj

33,140
10
61
78

Just noticed that and edited it before I read your comment. You were superfast though :) – Mik_A Mar 10 '15 at 19:58
Anyway still have to click twice.. using FF some new one – Mik_A Mar 10 '15 at 19:59
Updated my answer, please check now – Dhiraj Mar 10 '15 at 20:09
That seems to be easy way. Are classlists well supported do you know? – Mik_A Mar 10 '15 at 20:50
ClassList is a beauty. But there needs to be a Fallback then. IE8 is too widely used still. I found some fallback js but maybe better to put the .hidden default to block is best if – Mik_A Mar 11 '15 at 05:27

score 0 · Answer 3 · answered Mar 10 '15 at 20:01

Can you check an object's CSS display with javascript?

if the element's display is being inherited or being specified by a CSS rule, you'll need to get its computed style:

return element.currentStyle ? element.currentStyle.display : getComputedStyle(element, null).display;

greetz

score 0 · Answer 4 · answered Mar 10 '15 at 20:13

0

First time page loads the element has CSS style but it doesn't have style in JS, so all you have to do is adding display:none in using JS just when page loads. Add this line at the end of the page:

document.getElementById("navbar").style.display="none";

answered Mar 10 '15 at 20:13

Jafar Akhondali

1,552
1
11
25

score 0 · Answer 5 · edited May 08 '18 at 05:18

I found that it was because the "hidden" or "none" css values were declared only in a css file, and not in an inline statement. So in your html, be sure to declare your initial css style e.g. "display:none;" inline, which means to add it to the code in your html file and not to rely on javascript working with a css file. You see the css of display: none must be in the DOM first for javascript to manipulate it. It seems css from a css file is not in the DOM. Correct me if im wrong.

Click twice for js to function

5 Answers5

Update