Question

I have two elements, the first one is the default to print on screen

<input id=post-category value="first">

and the other is this, which will only show if some onclick was made and of course the first element must show off

<select id=cat-sel ><option>second</option></select>

UPDATED
I tried this code

el = document.getElementById("post-category");
el.style.visibility = "hidden";

el2 = document.getElementById("cat-sel");
el2.style.visibility = "visible";

but the problem here is, the 2nd element is indented. because it escapes the space for the 1st element. I don’t like that, I wanted them to be on the same position

Answer 1

Change to

el = document.getElementById("post-category");
el.style.display = "none";

el2 = document.getElementById("cat-sel");
el2.style.display = "block";

since visible/hidden does not remove the space the element takes up on the page

You need to set display:none on the field you need to hide initially

Assuming a checkbox have

window.onload=function() {
  document.getElementById("categoryCheckbox").onclick=function() {
    var chk = this.checked;
    document.getElementById("post-category").style.display = chk?"none":"block";
    document.getElementById("cat-sel").style.display = chk?"block":"none";
  }
}

PS: A little more code is needed for the show/hide to survive a reload by the way…