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" )

Answer 2

element.style only search for inline style, to get actual style you can use getComputedStyle

i.e.
if ( window.getComputedStyle(el).marginLeft=="-260px" ) {...

Reference: https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

Note: For IE, this only works for IE9 or above.

Answer 3

With this line

if(el.style.marginLeft=="-260px") {

You are checking if the inline style of the element is a specific value. However, this style is set in the css. I recommend adding a className to the menu to expand it. You can check for this classname and add/remove it accordingly:

  if ( el.className == "expanded" ) {
     el.className = "";
  } else {
     el.className = "expanded";
  }

With this addition to the css:

#menubalk.expanded {
    margin-left:0;
}

Answer 4

You say you set the menu style in the JavaScript somewhere but I would actually recommend doing that as part of your initialisation, rather than setting the left margin with CSS.

I suspect (it's hard to see without an example) that on the first click the JavaScript is going straight to the else condition because it's not recognising that you've set the margin in CSS (or elsewhere). Then on the second click, JavaScript has been used to set the left margin so it can read it and perform accordingly.