html - Javascript styling toggle doesn't work first click

Question

I'm making this little html app with a sidebar menu that pops up on click. It works fine except that it only starts to work after the second click. On the first click nothing happens.

CSS:

#menubalk{
   margin-left: -260px;
}

HTML:

<div id="menubutton">
   <img src="design/images/menu.png" id="menu" onclick="toggle()" alt=""/>
</div>

<div id="menubalk">
   <h5>Menu</h5>
</div>

Javascript:

function toggle () {
  var el = document.getElementById("menubalk");
  var kop = document.getElementById("kop");
  var pag = document.getElementById("pagina");

  if ( el.style.marginLeft=="-260px" ) {
     el.style.marginLeft="0px";
     kop.style.marginLeft="260px";
     pag.style.marginLeft="260px";
  } else {
     el.style.marginLeft="-260px";
     kop.style.marginLeft="0px";
     pag.style.marginLeft="0px";
  }
}

I think I might have to set the margin somewhere in the javascript also but I can't figure it out.

All help is greatly appreciated!

Answer 1

style.marginLeft is looking at your inline styles. As you haven't defined any inline style initially style.marginLeft is undefined.

To fix this, you could simply reverse your if/else statement:

if ( el.style.marginLeft=="0px" )