Question

I have found a function on Ozzu.com that fits my needs only problem is I do not grab whats happening 100%. Could you give me a run down of whats happening here:

function toggle(id) {
  var e = document.getElementById(id);

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

and then this goes in the source page:

<a href="#" onclick="toggle('content')">Toggle</a>

I am confused on what the if/else is actually doing to make this work

Answer 1

You’re modifying the CSS display property of the HTML element with ID “content”, onclick, via JavaScript. Every time you call the toggle function, it does essentially the following:

if (document.getElementById("content").style.display == '') {
  document.getElementById("content").style.display = 'none';
} else {
  document.getElementById("content").style.display = '';
}

If you set the display property to 'none', the HTML element with ID “content” will not be rendered. If you set it to empty string (""), it will use the default value for that HTML element (which is visible in all cases).